CODEWITHSUNDEEP
csstwitter-bootstrap-3
LP13
LP13

Reputation: 34179

input-group-addon doesnt stick to control

I am using bootstrap for layout. I have set max-width on the input control to 280px. But this causing input-group-addon not render properly when i use bootstrap's grid column size larger than 280px. input-group-addon does not stick with the control.

I have JSFiddle here

I guess input-group-addon always renders to the right of the column so there is a space between input control and addon.

How do i fix this without messing with max-width and col.

Upvotes: 2

Views: 231

Answers (2)

Mr. Hugo
Mr. Hugo

Reputation: 12600

I would NOT recommend to set the width of max-width of your inputs (or any other element), within Bootstrap.

Bootstrap elements are designed to fill all the available space. They can be made responsive very easily by using the built-in grid system. My recommendation is to limit their width by limiting the width of their container, like this: 

<div class="row">
  <div class="col-xs-6"><!-- NOTE THE 'XS' HERE -->
    <div class="input-group">
      <input name="FirstName" class="form-control" id="FirstName" type="text" value="399035034">
      <span class="input-group-addon">+</span>
    </div>
  </div>
</div>

https://jsfiddle.net/v85wzajr/2/

Upvotes: 0

Banzay
Banzay

Reputation: 9470

In your fiddle an .input-group-addon has width 32px, and both of .form-control (max-width: 280px;)and .input-group-addon (width: 32px) are included in the .input-group, then you just need to define max-width for .input-group:

.input-group {
  max-width: 312px;
}

jsfiddle

Upvotes: 1

Related Questions