CODEWITHSUNDEEP
formstwitter-bootstrap
Sebastian
Sebastian

Reputation: 471

Input Field plus Submit Button cover full column width on one line/row in Twitter Bootstrap

I am trying to achieve the following with Twitter Bootstrap:

I would like to have a simple <input> field and a simple <button> on one single line or row in Twitter Bootstrap. They should cover the entire width of the column/parent container (ie be of the same width as span12). I do not want to give the button a fixed with - I want the button to be fluid width (width determined by the button text). The input field should use the remaining space left of the button.

Here is a fiddle: http://jsfiddle.net/MgcDU/3202/

The fiddle shows the button aligned to the right.

Now: how do I get the input field to extend to the very left edge of the parent container?

I would like to retain the responsiveness, of course.

Any ideas? I do prefer a non Javascript based solution!

Upvotes: 2

Views: 1612

Answers (2)

Scott Yang
Scott Yang

Reputation: 2428

Done

http://jsfiddle.net/MgcDU/3251/

Using approach from here:

http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/

    <div class="container">
        <div class="row">
            <div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
        </div>
        <div class="row">
            <div class="span12">
                <div class="pull-right">
                    <form class="form-inline">
                        <button type="submit" class="btn" style="float:right;">Button</button>
                        <div style="overflow: hidden; padding-right: .3em;">
                            <input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Upvotes: 3

Corban Cloud
Corban Cloud

Reputation: 11

You could get the width of the button with jQuery, and get the width of the parent span12 then set the input width to be the difference of the two. I don't think there is any other way if the button width has to be dynamic.

Upvotes: 1

Related Questions