CODEWITHSUNDEEP
csshtmltwitter-bootstrapbootstrap-material-design
chRyNaN
chRyNaN

Reputation: 3692

Resize dropdown menu in Bootstrap

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>

Upvotes: 2

Views: 9208

Answers (1)

Christopher White
Christopher White

Reputation: 288

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.

Upvotes: 1

Related Questions