Menu
I am learning Bootstrap. I would like to have a button with dropdown such as the following:
<div class="btn-group">
<a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<div class="dropdown-menu" style="width: 300px;">
<div >
Long text goes here.
</div>
</div>
</div>
Instead of dropdown menu, I have <div> with long text and other html tags. The problem is that I tried different CSS rules and the long text either extends beyond the <div> or causes scroll bars to show up. I just want the long text wrap nicely within the <div> and goes down depending on the amount of text.
How can I do this?
Am I using "dropdown-menu" component the wrong way?
327
Basic Dropdown To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
//On focus out set the original width of DropDownList. Apply the Css Class adjust-width to all ASP.Net DropDownLists for which you want handle long text as shown below. Apply the Css Class adjust-width to all HTML SELECT DropDownLists for which you want handle long text as shown below.
HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
Just add white-space: normal; to your .dropdown-menu
Example fiddle
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
