Resize dropdown menu in Bootstrap

Question

I'm using Bootstrap 3.2 as well as this material design plugin. I added a dropdown to a navbar. Within the list item of this dropdown-menu, I have a custom "layout". Something like this:

<li class="list-group-item">

    <div class="row-picture">
        <img class="circle" src="" alt="icon"></img>
    </div>
    <div class="row-content">
        <h4 class="list-group-item-heading">Placeholder</h4>
        <p class="list-group-item-text">Placeholder</p>
    </div>

</li>

The problem is that when I click the dropdown button, the dropdown menu cuts off the text. I've tried a few different ways of editing the css to change the width following answers like this one and this one. However, none seems to fix my problem. How can I set a custom width to a dropdown menu, so, it doesn't clip my text?

Edit: Here's some relevant code:

<head>
  <meta charset="utf-8"></meta>
  <meta name="viewport" content="width = device-width, initial-scale = 1"></meta>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></link>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/css/material.min.css"></link>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/css/material-wfont.min.css"></link>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/css/ripples.min.css"></link>
  <link rel="stylesheet" type="text/css" href="css/dashboard.css"></link>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>

  <header id="header-navigation">
    <div id="nav-bar-container">
      <nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div id="nav-item-container" class="container-fluid">
          <div id="drop-down" class="navbar-header">
            <div id="home-button" class="navbar-left">
              <a class="navbar-brand" href="#">
                <img alt="Brand" src=""></img>
              </a>
            </div>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">User Name
           <span class="mdi-navigation-expand-more"></span>
          </a>
              <ul class="dropdown-menu list-group" id="dropdown-items" role="menu">
                <li class="list-group-item">

                  <div class="row-picture">
                    <img class="circle" src="" alt="icon"></img>
                  </div>
                  <div class="row-content">
                    <h4 class="list-group-item-heading">Placeholder</h4>
                    <p class="list-group-item-text">Placeholder</p>
                  </div>

                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-out"> Logout</span></a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/js/material.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/js/ripples.min.js"></script>

</body>

can you post some code into a codepen or fiddle? that'll help get your question answered more quickly. — Todd, Nov 13 '14 at 19:31
With only bootstrap's styling, I have not been able to recreate the issue: http://www.bootply.com/z4GF8pbeqo . What additional styling does your plugin or any custom CSS add to these elements? — Marcelo, Nov 13 '14 at 19:34
I'm using the material design styling plugin. I posted the link in the question. I try to incorporate their "list-group" into a dropdown menu. To make the text appear to the right of the picture as a single list item. — chRyNaN, Nov 13 '14 at 19:40

score 1 · Accepted Answer · answered Nov 13 '14 at 19:35

1

Bootstrap is a great library but it does things in a very rigid way with things like dropdowns and modal windows. I find myself having to work around it sometimes when what I want to do falls outside the paradigm they are working with. One way to do what you want is to make your css as specific as possible so that you can override the bootstrap css selector.

for example instead of just

.dropdown .list-group-item{}

try

html body ... [drilling into elements] ... div.dropdown div.list-group-item {}

Another thing I do a lot with Bootstrap is use the !important; flag on the css rule that is being picky.

.dropdown .list-group-item{ width: 400px!important; }

In many cases I have to do both.

answered Nov 13 '14 at 19:35

Christopher White

298
1
8

It did not work and then it did. I wonder why just putting an !important flag and being very specific with the selector made that much of a difference. But it did, thanks! – chRyNaN Nov 13 '14 at 20:21
1

The reason it is necessary is because bootstrap has A LOT of css and it can get pretty specific itself. If you are interested I recommend you play with the Bootstrap .less source. It allows you to set your own defaults for many things that you might want to do differently. Plus you will get a chance to see some of their css markup. – Christopher White Nov 13 '14 at 20:50

Resize dropdown menu in Bootstrap

1 Answers1