Jay F1 Jay F1 - 14 days ago 7
ASP.NET (C#) Question

Bootstrap form elements - in-line group not working as expected

I'm using the following code to build a small in-line form group but it doesn't display properly.

It displays perfectly in this jsfiddle but on my webpage, it shows like this:

Form display

<form role="form" runat="server">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn input-group-lg">
<asp:DropDownList ID="ddreg" CssClass="form-control input-lg" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text="<Select>" Value="0" />
</asp:DropDownList>
</span>
<input type="text" class="form-control" id="comments" placeholder="Enter any comments..." />
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Add</button>
</span>
</div>
<!-- /.input-group -->
</div>
</form>


The HTML source is outputted as follows:

<div class="form-group">
<div class="input-group">
<span class="input-group-btn input-group-lg">
<select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
<option value="0">&lt;Select&gt;</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
</span>
<input type="text" class="form-control" id="comments" placeholder="Enter any comments..." />
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Add</button>
</span>
</div>
<!-- /.input-group -->
</div>


This all goes into an
asp:ContentPlaceHolder
block, which is in my master page like this:

<div class="container">
<!-- Page content here -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
<hr />

<footer>
<p>&copy; 2016.</p>
</footer>
</div> <!-- /container -->

Answer

First of lets see what documentation for input groups states: http://getbootstrap.com/components/#input-groups

Textual <input>s only

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

So now we need to scrape use of select component, and use button drop downs for example:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->

If you are unable to use button drop down lets see if we can do this with bootstrap grid?

<form class="form my-form">
    <div class="col-xs-5">
        <div class="form-group row">
            <select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
                <option value="0">&lt;Select&gt;</option>
                <option value="2">2</option>
                <option value="3">3</option>
             </select>
         </div>
    </div>
    <div class="col-xs-5">
        <div class="form-group row">
            <input type="password" class="form-control input-lg" id="exampleInputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="col-xs-2">
        <div class="form-group row">
            <button type="submit" class="btn btn-default btn-block btn-lg">Add</button>
        </div>
    </div>
</form>

Close, but we need to get rid of that rounded corners and to make sure that all elements are same height:

.my-form .input-lg, .my-form .btn-lg {
  border-radius: 0 !important;
  height: 42px !important;
}

.my-form .input-lg,
.my-form .btn-lg {
  border-radius: 0 !important;
  height: 42px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form my-form">
  <div class="col-xs-5">
    <div class="form-group row">
      <select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
        <option value="0">&lt;Select&gt;</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-5">
    <div class="form-group row">
      <input type="text" class="form-control input-lg" id="comments" placeholder="Enter any comments...">
    </div>
  </div>
  <div class="col-xs-2">
    <div class="form-group row">
      <button type="submit" class="btn btn-default btn-block btn-lg">Add</button>
    </div>
  </div>
</form>

This is all css needed for this form, I also added !important marker as asp.net knows to play with input sizes in nasty way.

Hope this helps