CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinput
devjs11
devjs11

Reputation: 1958

Bootstrap input-append does not work on fluid grid

I am trying to use input-append for the search input inside fluid row but unfortunately it does not seem to work correctly as it does not scale to full width of container.

Here is my example piece of code:

<div class="container">
<div class="row-fluid">
<div class="span12">


    <div class="input-append">
    <input class="span12" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

</div>
</div>
</div>

But the input does not scale full width of span12. Does anyone know why this is happening or what am I missing?

Upvotes: 2

Views: 3384

Answers (4)

NeueDeutsche
NeueDeutsche

Reputation: 11

for fixed width on the button you can use a different technique

.controls { 
    position: relative; 
}

.input-append{
    width: 100%;
}

.input-append input[type="text"]{
    position: absolute;
    width: auto !important;
    margin-right: 42px;
    left: 0px;
    right: 0px;
}

.input-append button{
    width: 42px;
    float: right;
    margin: 0px !important;
    padding: 0px !important;
}

.input-append input[type="text"],
.input-append button{
    height: 42px;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -ms-box-sizing: padding-box;
    box-sizing: padding-box;
}

Upvotes: 1

kevinkneifel
kevinkneifel

Reputation: 1

I usually try to solve the fluidity problems in Bootstrap by employing the border-box box-sizing model. Something like this recently worked for me:

.input-append{
    width: 100%;
}

.input-append input[type="text"]{
    width: 90% !important;
}

.input-append button{
    width: 10%;
}

.input-append input[type="text"],
.input-append button{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

Obviously you'll want to put this all within the scope of your form, but you get the idea.

Upvotes: 0

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 20007

Here is a jsFiddle: http://jsfiddle.net/persianturtle/SXcV3/

#appendedInputButton {
    width:100%;
}

I also recommend you use the span12 class for the div that holds the input, and not on the input itself.

Update: since bootstrap adds some padding to their buttons for aesthetic reasons, I made the input button width 95% which looks better with no horizontal scroll bar.

Updated jsFiddle: http://jsfiddle.net/persianturtle/SXcV3/1/

Upvotes: 2

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

There is unnecessary .row-fluid and .span12 div. Correct markup is

<div class="container">


    <div class="input-append">
    <input class="span12" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

</div>

Working fiddle

Upvotes: 0

Related Questions