CODEWITHSUNDEEP
htmltwitter-bootstrap
executifs
executifs

Reputation: 1178

Weird rendering in Bootstrap's input groups

I've noticed something strange with Bootstrap 3's rendering of input groups, at least on Firefox and IE (Chrome untested):

Bootstrap 3 input group rendering issue

As you can see, if there are two or more buttons preceding a text input, its left margin becomes wider.

Here is the code I used to reproduce this issue:

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

<br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

Is this expected/normal? How can I fix this?

Associated JSFiddle: https://jsfiddle.net/DTcHh/21418/

Upvotes: 0

Views: 214

Answers (2)

vanburen
vanburen

Reputation: 21663

Your structure is not correct per the Docs --> Multiple Button Input Group.

You're currently applying input-group-addon directly to the buttons, you want input-group-btn as the parent of the buttons (this is also why you're not seeing the btn-default styling also, it should be white, not grey).

Working Example;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <br/>
  <br/>

  <h1>Correct per Docs</h1>
  <div class="input-group">
    <div class="input-group-btn">
      <span class="btn btn-default" id="basic-addon1">A</span>
      <span class="btn btn-default" id="basic-addon2">B</span>
    </div>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
  </div>

  <br/>
  <br/>

  <h1>Questions Example</h1>
  <div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
  </div>


</div>

Upvotes: 1

crazymatt
crazymatt

Reputation: 3286

I assume you are talking about the double border you see on B? If so its just because there are 1px borders for B and C so when they show next to each other there are 2. This could be easily removed by using something like this: 

.form-control {
  border-left: 0;
}

But in doing this it will remove the border and it will show incorrectly if you use this technique with no other button elements next to it. If you add this HTML or view your updated js.fiddle so can see what I mean.

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

    <br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

<br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>

So I believe this is why the Bootstrap team has the double borders there because depending on what you need to do its probably better to have 2 borders on some occasions then none. Hope that helps.

Upvotes: 1

Related Questions