Mark Mark - 7 months ago 8
HTML Question

Bootstrap Input Field - Columns Not Working

I have a problem with Bootstrap. I'm kind of new to this framework, and I'm trying to get a searchbar with a dropdown and a button to click on for searching. But for some reason, the isn't not sizing up to the column width. It's staying a very small size but the dropdown and the button to the right of the tag are where I want them to be. Could someone help me out?

Thanks!

<div class='container'>
<div class='row'>
<div class='col-sm-12 col-md-12 col-lg-12'>
<form method='get' action='search_results.php' class='form-inline'>

<div class='input-group'>
<div class='input-group-btn'>
<select id='selector' class='selectpicker form-control' data-live-search='true'>
<option>Categories</option>
<option>Computers</option>
</select>
</div>

<div class='input-group'>
<input type='text' class='form-control' placeholder='Search' name='searchTerm'>
</div>
<div class='input-group-btn'>
<button class='btn btn-default'><i class='glyphicon glyphicon-search'></i></button>
</div>
</div>
</div>
</form>

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

Answer

What happened was you were wrapping everything in input-group, which basically controls the sizing of the object. I removed the wrapping around the search, but kept it for the category. You can see I set an inline css of 150px width (you can set this on the CSS side to better manage it)

<div class='col-sm-12 col-md-12 col-lg-12'> 
                <form method='get' action='search_results.php'>
                    <div class='input-group'>
                        <div class='input-group-btn' style="width:150px">
                            <select id='selector' class='selectpicker form-control' data-live-search='true'>
                                <option>Categories</option>
                                <option>Computers</option>
                            </select>
                        </div>
                        <input type='text' class='form-control' placeholder='Search' name='searchTerm'>
                        <div class='input-group-btn'>
                            <button class='btn btn-default'><i class='glyphicon glyphicon-search'></i></button>
                        </div>
                    </div>
                </form>
            </div>
Comments