CODEWITHSUNDEEP
javascripthtmlcssasp.nettwitter-bootstrap
lucidgold
lucidgold

Reputation: 4542

Weird Bootstrap input group behavior

The above image shows my attempt at creating my own "light-weight" Bootstrap-looking ComboBox control with ASP.NET textbox.

The input group shown above which consists of a texbox and button (with black arrow) looks funny. Has anyone experienced this before? Any ideas as to why it looks that way? Any recommendations to fix this?

I am not doing anything fancy here. The mechanism that "appends" a button to a textbox is supported by Bootstrap.

ASPX Page:

<div class="col-sm-3" id="TimesheetStep"><b>Timesheet Date</b> 
   <div class="input-group">                                              
      <asp:TextBox runat="server" ID="TimesheetBox" CssClass="form-control">
      </asp:TextBox>

      <div class="input-group-btn">

         <button type="button" class="btn btn-inverse dropdown-toggle" 
                 data-toggle="dropdown">
            <span class="caret"></span>
         </button>

         <ul id="demolist" class="dropdown-menu scrollable-menu pull-right" 
             runat="server" role="menu">                                  

             <li><a href="#">11/22/2013</a></li>
             <li><a href="#">11/15/2013</a></li>
             <li><a href="#">11/08/2013</a></li>
         </ul>

      </div>

   </div>                            
</div>

CSS:

.scrollable-menu {  height: auto; max-height: 300px; overflow-x: hidden; }

Upvotes: 2

Views: 619

Answers (2)

lucidgold
lucidgold

Reputation: 4542

I figured it out:

With this HTML:

<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
</button>

You get:

enter image description here

But with the following HTML examples:

<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
   &nbsp;<span class="caret"></span>
</button>

OR

<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
   Action<span class="caret"></span>
</button>

You get (respectively):

enter image description here

So it looks like you need to add a word (e.g., Action) OR just put an HTML space (e.g., &nbsp;)before <span class="caret"></span>. I hope this helps someone.

Upvotes: 3

user4244405
user4244405

Reputation:

This is a common problem in Twitter Bootstrap. The "computed" CSS height of the input field is different than that of the actual button. Open your "developer tools" on your browser, and inspect the element styles, then find where it is overwritten | OR - fix the bootstrap CSS of the drop-down button, append: !important so it cannot be overridden.

Upvotes: 0

Related Questions