Bootstrap Form Not Displaying In-line (C#)

Question

I am trying to get a form to display inline. I can do this WITHOUT using bootstrap, but then obviously I lose the CSS styling. When I try and use the bootstrap classes, I end up with the form displaying vertically. Does anyone have a quick fix for this?

Here is my HTML helper form:

@using (Html.BeginForm("Index", "Person", FormMethod.Get, htmlAttributes: new { @class = "form-inline" })) {

<fieldset>
  <p>
    Filter by: @Html.DropDownList("FilterType", null, htmlAttributes: new { @class = "form-control" }) Search for: @Html.TextBox("SearchString", null, htmlAttributes: new { @class = "form-control" }) | Display: @Html.DropDownList("ItemDisplay", null, htmlAttributes:
    new { @class = "form-control" })
    <input type="submit" class="btn btn-default" value="Submit" />
  </p>
</fieldset>
}

Hard to tell without seeing the generated HTML. But here's a link with several answers about bootstrap horizontal forms. Some people had trouble with the in-line classes on the 2nd answer. stackoverflow.com/a/22901564/3585500. — ourmandave
– ourmandave, Commented Dec 8, 2015 at 12:05

Vidhyadhar Galande · Accepted Answer · 2015-12-08 12:18:37Z

try this code and modify your code

@{var listItems = new List<ListItem>
    {
          new ListItem { Text = "Exemplo1", Value="Exemplo1" },
          new ListItem { Text = "Exemplo2", Value="Exemplo2" },
          new ListItem { Text = "Exemplo3", Value="Exemplo3" }
    };
}
@using (Html.BeginForm("Index", "Home", FormMethod.Get, new { @class = "form-group" }))
{
  <fieldset>        
        <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel-body form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> Filter by:- </label>
                        <div class="col-sm-2">
                          @Html.DropDownList("Exemplo", new SelectList(listItems, "Value", "Text"), new { @class = "form-control" })
                        </div>
                        <label class="col-sm-2 control-label"> Search for:- </label>
                        <div class="col-sm-2">
                            @Html.TextBox(data.BannerName, null, new { @class = "form-control" })
                        </div>
                        <label class="col-sm-2 control-label"> Filter by:- </label>
                        <div class="col-sm-2">
                           @Html.DropDownList("Exemplo1", new SelectList(listItems, "Value", "Text"), new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group last">
                        <div class="col-sm-offset-4 col-sm-8">
                            <input type="submit" class="btn btn-default" value="Submit" />
                        </div>
                    </div>
                </div>                    
            </div>
         </div>    
       </div>
   </fieldset>
}

This kind of worked, I will try and modify it further to get what I want. Thanks for the head start.

Vidhyadhar Galande · Accepted Answer · 2015-12-08 12:33:07Z

0

Try another

@using (Html.BeginForm("Index", "Person", FormMethod.Get, new { @class = "form-inline panel-body form-horizontal form-group" })) 
   {  
    <fieldset>
      <p>
        Filter by: @Html.DropDownList("FilterType", null, new { @class = "form-control" }) Search for: @Html.TextBox("SearchString", null, new { @class = "form-control" }) | Display: @Html.DropDownList("ItemDisplay", null, new { @class = "form-control" }) <input type="submit" class="btn btn-default" value="Submit" />
      </p>
    </fieldset>
    }

answered Dec 8, 2015 at 12:33

Vidhyadhar Galande

5957 silver badges15 bronze badges

1 Comment

James Over a year ago

Thanks for your answer, however this still didn't work.

James · Accepted Answer · 2015-12-08 14:21:56Z

In case anyone is interested, I managed to solve this using:

@using (Html.BeginForm("Index", "TouchPoint", FormMethod.Get, new { @class = "form-inline" }))
{
<div class="form-group">
    <label for="filter">Filter by:</label>
    @Html.DropDownList("FilterType", null, new { @class = "form-control", id = "filter" })
</div>
<div class="form-group">
    <label for="search">Search for:</label>
    @Html.TextBox("SearchString", null, new { @class = "form-control", id = "search" })
</div>
<br /><br />
<div class="form-group">
    <label for="start">Start date:</label>
    @Html.TextBox("StartDateFilter", null, new { @class = "form-control", id = "start" })
</div>
<div class="form-group">
    <label for="end">End date:</label>
    @Html.TextBox("EndDateFilter", null, new { @class = "form-control", id = "end" })
</div>
<div class="form-group">
    <label for="display">Display:</label>
    @Html.DropDownList("ItemDisplay", null, new { @class = "form-control", id = "display" })
</div>
<div class="form-group">
    <label for="submitBtn" id="submitLabel">.</label><br />
    <button type="submit" class="btn btn-default" id="submitBtn">Submit</button>
</div>
}

Collectives™ on Stack Overflow

Bootstrap Form Not Displaying In-line (C#)

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related