1

I'm trying to get a beautiful form with input-group Bootstrap 3.3.7 class, but something is wrong.

I think I have coded right input-group structure: the main div contains other three elements, an input-group-addon, an input-form and finally an input-group-button (with things inside).

My problem is that the third element broke the height main div, resulting in an input-group-addon few pixels bigger than other input-group elements.

My code:

<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>

My results:

enter image description here

Without input-group-button, the code works fine, but I really need this third element. I tried with glyphicons and btn-link instead btn-default... And I get difference wrong heights (a not exactly same result that the picture).

By the way, I have 7 input-group in the form and 4 work properly and 3 have this problem, so there should not be a CSS inherit problem or something like that.

Anybody knows where is the problem?

ksav
  • 20,015
  • 6
  • 46
  • 66
MAL
  • 143
  • 1
  • 14
  • 1
    Your code, being angular code is not something we can outright test, can you build an stackblitz or jsfiddle showing replicating your issue? – IvanS95 Nov 30 '18 at 14:48
  • I have the same problem with an input instead ng2-completer. – MAL Dec 03 '18 at 09:30

1 Answers1

0

Does your input get rendered by angular with a class of 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>
ksav
  • 20,015
  • 6
  • 46
  • 66
  • I have added an [inputClass]="'form-control'" without any positive changes. In the same way, I have another case with an input tag (with class form-control)... and the same result. – MAL Dec 03 '18 at 09:31
  • Can't you just add it as a regular class? – ksav Dec 03 '18 at 11:01
  • When I have a regular input with regular class attribute (I mean without angular tags) or inject class in ng2-repeter the behaviour is the same: elements misaligned. When I add a regular class form-control in the ng2-completer the result is a new input element over the ng2-completer. – MAL Dec 03 '18 at 11:10
  • What is the HTML that is rendering? Can you add a snippet to your question? – ksav Dec 03 '18 at 11:27
  • 1
    Finally I have found a workaround with your answer. I just added form-control class to the ng2-completer, changed btn-default for btn-link class in the button element, add some css to get a btn-default look et voilà! It's working! – MAL Dec 07 '18 at 08:15