Jaylen Jaylen - 3 months ago 15
CSS Question

How can I allign select menu with a button on the same line with css bootstrap?

I am trying to put a select menu on the same line with a button using css bootstrap framework.

Here is what I have done

<div class="input-group">

<select class="form-control columnMenu" name="param[]" id="somethingCool" data-columntype="null" required="">
<option value="" date-columntype="" selected="">Select a column</option>
<option value="currentDate" date-columntype="datetime">Current Date</option>
<option value="currentUtcDate" date-columntype="datetime">Current UTC Date</option>
<option value="recordCounter" date-columntype="integer">Record Counter</option>
</select>

<button type="button" class="btn btn-default btn-sm removeOneParameter">
<span class="glyphicon glyphicon-remove"></span>Delete<
/button>

</div>


but, the button is jumping on the second line.

Here is a fiddler to show my code in action

https://jsfiddle.net/s2tphgpf/

How can I line up the menu with a button?

Answer

Try using to wrap everything with a display table like this

<div style="display: table">

   <div style="display: table-row">

       <div style="display: table-cell">
             <select class="form-control columnMenu" name="param[]" id="somethingCool" data-columntype="null" required="">
             <option value="" date-columntype="" selected="">Select a column</option>
             <option value="currentDate" date-columntype="datetime">Current Date</option>
             <option value="currentUtcDate" date-columntype="datetime">Current UTC Date</option>
             <option value="recordCounter" date-columntype="integer">Record Counter</option>
             </select>
        </div>

        <div style="display: table-cell">
             <button type="button" class="btn btn-default btn-sm removeOneParameter">
             <span class="glyphicon glyphicon-remove"></span>Delete
             </button>
        </div>

   </div>

</div>

https://jsfiddle.net/s2tphgpf/2/

Comments