How to place a button beside a select List

Question

I am coding an MVC 5 view, and I want to place a button next to a select list. My current code places the button under the select list.

Here is my code:

<div class="form-group">
    @Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" })
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Select" class="btn btn-default" />
        </div>
    </div>
</div>

Here is an image showing the button placement:

Button placement

Even if I have the following code, the button is under the select list:

<p>
    @Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" }) <input type="submit" value="Select" class="btn btn-default" />
</p>

score 0 · Answer 1 · answered Dec 18 '14 at 10:46

0

Don't put the submit button in a div.

A div is display: block by default.

answered Dec 18 '14 at 10:46

Quentin

914,110
126
1,211
1,335

`col-md-offset-2` is bootstrap. Without looking it up, I think it's `float:left` – Rhumborl Dec 18 '14 at 10:47
Even if I remove all the divs, the button is still under the select list. – Simon Dec 18 '14 at 10:49
@Rhumborl — That wouldn't stop it from generating a new line. Float lets following stuff bubble up beside. – Quentin Dec 18 '14 at 10:50
@user3736648 — Then there is insufficient code in your question to tell what the problem is. By default, if you have a `` as siblings, they will render next to each other (word wrap not withstanding). – Quentin Dec 18 '14 at 10:51
Is there a style line of code that I can add to the div or each of the html objects that will force the alignment? – Simon Dec 18 '14 at 10:54
You need to determine why the alignment is wrong first. Try using the CSS part of the developer tools built into your browser to figure out what the cause is. – Quentin Dec 18 '14 at 10:56

score 0 · Answer 2 · answered Feb 25 '19 at 10:53

<div class="input-group">
   @Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" })
   <span class="input-group-btn">
   <input type="submit" value="Select" class="input-group-addon btn btn-default" />
   </span>
</div>

By using the classes input-group on the div, input-group-btn on the span and input-group-addon on the select button , you can place dropdownlist and button on the same line.

Refer to this article : https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-input-groups.php

How to place a button beside a select List

2 Answers2