CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Powkachu
Powkachu

Reputation: 2268

Bootstrap input-group-addon

I have a problem using the class input-group-addon: my html code is generated by JavaScript and I generate it in identical structures in my various pages.

But, in one page, it works, and in another page, it doesn't work. I can't figure out why!

When it's working:

enter image description here

And when it's not:

enter image description here

Here is the html code:

<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon input-sm">
      <span class="glyphicon glyphicon-search"></span>
    </div>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter">
  </div>
</div>

Do you have an idea why is it not working?

Thank you for your help!

Upvotes: 1

Views: 9265

Answers (2)

DavidDomain
DavidDomain

Reputation: 15293

Since we can't see your additional styling it is pretty hard to tell where the problem might be, but there are at least two thing in your 'html' that might cause problems.

First

You have added the input-sm class onto the div with the input-group-addon. The input-sm class should be placed onto the div with the input-group class as the Bootstrap docs state:

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Second

The div element by default has a display property of block, unless you change this to something else, whereas the input-group-addonand several other Bootstrap form and input classes have a display property of table-cell. The only way i could reproduce your strange formatting of your input-group was by changing the display property to block on some of the relevant classes.

Here is an example:

.input-group-addon.input-sm {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon input-sm">
      <span class="glyphicon glyphicon-search"></span>
    </div>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter" />
  </div>
</div>

So, to make a long story short you might want to construct your html like this:

/*****************************************
  Do not change the display property
  of any of these classes to block.

  .input-group
  .form-control
  .input-group-addon
  .input-group-btn

  the default display value of these
  classes is table-cell.
******************************************/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group input-sm">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
    </span>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter" />
  </div>
</div>

Hope this helps.

Upvotes: 1

Bibek Sharma
Bibek Sharma

Reputation: 3320

It's working fine for me :)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon input-sm">
      <span class="glyphicon glyphicon-search"></span>
    </div>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter">
  </div>
</div>

Upvotes: 0

Related Questions