CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3253746
user3253746

Reputation: 75

Preventing content to overflow through a dropdown menu of fixed width

What I'm trying

I want to fix the width of dropdown menu i.e. ul.dropdown-menu in Bootstrap.

Bug

If a list-item has a long content, it overflows through the dropdown menu.

JSFiddle

http://jsfiddle.net/96fwK/

Code

<ul class="dropdown-menu" role="menu" aria-labelledby="drop3" style="width:400px;">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <!-- Below is the buggy list-item -->
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">A very long content overflows 
            the list-item if ul.dropdown-menu's width is fixed
        </a>
    </li>
</ul>

In the first line, I aded style="width:400px;". Rest all is the Bootstrap's normal syntax.

How it looks

The content overflows through <code>list-item</code> on fixing <code>ul.dropdown-menus</code>'s width

How I want it to look

I want the long content to break into new lines so that it looks just like this:

Preventing the content to overflow and making it look like this

What I've tried

All these didn't work.

  1. Added display: block; to the buggy li (the one through which the content is overflowing) and to the <a> tang inside it.
  2. word-break to the buggy li and <a>.
  3. max-width to the buggy li and <a>.
  4. Adding display: table; to ul.dropdown-menu removes its dropdown functionality and causes its width to increase so as to wrap the buggy li completely.
  5. Added a <div style="display:block;>" inside the buggy li to wrap the content.
  6. display: block !important; to the buggy li.
  7. Adding display: block; toul.dropdown-menu` also removes dropdown functionality.
  8. I also searched for answers on SO and Google.

What I don't want

  1. To truncate the content and add ellipsis.
  2. To add a scroll-bar or hide the content.

Upvotes: 0

Views: 2419

Answers (3)

Ex-iT
Ex-iT

Reputation: 1477

Can you remove the white-space: nowrap; from the .dropdown-menu>li>a? or set white-space: normal; to the <a>.

Upvotes: 3

WackyWalrus
WackyWalrus

Reputation: 324

Try replacing this

<a role="menuitem" tabindex="-1" href="#" style="word-wrap:break-all">
    A very long content overflows the list-item if ul.dropdown-menu's width is fixed
</a>

With this:

<a role="menuitem" tabindex="-1" href="#" style="white-space:normal">
    A very long content overflows the list-item if ul.dropdown-menu's width is fixed
</a>

White-space is pretty helpful, I like white-space.

Upvotes: 1

alou
alou

Reputation: 1502

What you need here is the white-space property on the a tag:

  .dropdown-menu > li > a {white-space:normal}

Upvotes: 1

Related Questions