CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert
Robert

Reputation: 4406

How to increase the width on the the twitter bootstrap dropdown menu?

How do I increase the width on the twitter bootstrap dropdown menu. I need the list to have Alcohol Incidents and Status Reports as an option but the default width is not large enough to encompass that much text. 

 <li class="dropdown subnavbar-open-right">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span>Reports/Statistics</span><b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"><a>USN</a>
                            <ul class="dropdown-menu">
                                <li><a>Alcohol Incidents and Status Reports</a></li>

                            </ul>

Upvotes: 1

Views: 3424

Answers (1)

crazymatt
crazymatt

Reputation: 3286

Looking at the code you provided I made a test page using Twitter BootStrap's default set up and added your text "Alcohol Incidents and Status Reports" into the drop down menu. What I found is the drop down menu auto expanded to include the entire width of the text.

This means that either you have left some code out necessary for this to work correctly or you overriding CSS classes causing it not to work. Here is the code:

    <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">Name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Alcohol Incidents and Status Reports</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

If this does not help you then you may want to provide more of your code so people can help you debug. I have a link to JSFiddle but it seems that we are not allowed to post those links now. Well here its extension /tS95X/1/ if you want to look it up.

Upvotes: 1

Related Questions