CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Timr
Timr

Reputation: 1032

Bootstrap - Aligning select and submit within form within popover

I'm trying to get a select, an input, and a button to align inside an inline form that's within a popover, but as of yet I've had no success. I've followed the docs and tried to experiment with different widths for the select, but to no avail

Edit: Updated to reflect Eric B's suggestion

Code: 

<li><a data-placement="bottom" data-toggle="popover" data-container="body" type="button" href="#" id="login" >Login</a></li>
            <div id="popover-head" class="hide">Login</div>
            <div id="popover-content" class="hide">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <select class="form-control">
                            <option>NA</option>
                            <option>RU</option>
                            <option>EU</option>
                            <option>SEA</option>
                        </select> 
                        <input type="text" placeholder="Name" class="form-control" maxlength="5">
                        <button type="submit" class="btn btn-primary">Go To Login &raquo;</button>                                  
                     </div>
                </form>
            </div>

Output: Example http://puu.sh/4XWmi.png

Upvotes: 0

Views: 1672

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362700

I think you're seeing 2 problems..

First, in Bootstrap 3, the form inputs are no longer set to a specific width, so you need to set a width for the inputs to prevent stacking. This can be done by overriding .form-control or set the width by using a style= attribute on your inputs.

Secondly, the Bootstrap .popover has a max-width of 276px, so you need to increase the width accordingly...

.form-control {width:120px;}
.popover {max-width:400px;}

Working demo: http://bootply.com/89823

Upvotes: 2

Eric Bishard
Eric Bishard

Reputation: 5341

Try NOT wrapping each one in their own <div> tag. But wrapping all 3 in one <div> tag.

   <li><a data-placement="bottom" data-toggle="popover" data-container="body" type="button" href="#" id="login" >Login</a></li>
            <div id="popover-head" class="hide">Login</div>
            <div id="popover-content" class="hide">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <select class="form-control" width="20%">
                            <option>NA</option>
                            <option>RU</option>
                            <option>EU</option>
                            <option>SEA</option>
                        </select>                                   
                        <input type="text" placeholder="Name" class="form-control" maxlength="5" width="20%">
                     <button type="submit" class="btn btn-primary" width="20%">Go &raquo;</button>
                     </div>
                </form>
            </div>

Upvotes: 0

Related Questions