Получение неверной высоты в группе начальной загрузки - PullRequest
Новая
       20

Получение неверной высоты в группе начальной загрузки

0 голосов
/ 30 ноября 2018

Я пытаюсь получить красивую форму с классом Bootstrap 3.3.7 группы ввода, но что-то не так.

Я думаю, что я кодировал правильную структуру группы ввода: основной div содержит три другихelements, add-group-addon, input-form и, наконец, кнопка input-group-button (с вещами внутри).

Моя проблема в том, что третий элемент сломал главный div высоты, что привело к вводу-group-addon на несколько пикселей больше, чем другие элементы группы ввода.

Мой код: 

<div class="col-xs-12 col-md-6">
    <div class="input-group">
        <span class="input-group-addon" id="sizing-addon2">Artículo</span>
        <ng2-completer [(ngModel)]="bus.articuloName" (selected)="artSelected($event)" [matchClass]="'match'" [placeholder]="'Nombre de Articulo'" [datasource]="artService" [textNoResults]="'No hay coincidencias'"></ng2-completer>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" (click)="init('art')">
                X
            </button>
        </span>
    </div>
</div>

Мои результаты:

enter image description here

Без кнопки ввода группы код работает нормально, но мне действительно нужен этот третий элемент.Я пробовал с глификонами и btn-link вместо btn-default ... И я получаю разницу неправильной высоты (результат не совсем такой, как на картинке).

Кстати, у меня 7 входных групп вформа и 4 работают должным образом, а 3 имеют эту проблему, поэтому не должно быть проблемы наследования CSS или чего-то в этом роде.

Кто-нибудь знает, в чем проблема?

1 Ответ

0 голосов
/ 30 ноября 2018

Ваш вход отображается как угловой с классом form-control? 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-12 col-md-6">
  <div class="input-group">
    <span class="input-group-addon">Artículo</span>

    <input type="text" class="form-control" placeholder="Nombre de Articulo">

    <span class="input-group-btn">
        <button class="btn btn-default" type="button">X</button>
    </span>

  </div>
</div>
...