Materialize: How to increase width and height of the drop down in the nav bar?

[sanathp]

looks like heigh and width are predefined . And we are getting scrollbar if the width of the content in the dropdown is greater than the width of parent element in dropdown

example :

<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one two threee</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="components.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
    </ul>
  </div>
</nav>

[acburst]

Fixed the overflow issue here 5019b4cf345f05d9095787ada07e9a346bc7c257

[acburst]

You can have the width go past that of the button by defining data-constrainwidth="false"

There are more options that I've added to the documentation but they won't be live until our next release.

[sanathp]

Thanks :) . Appreciate your effort in creating this awesome library.

[Fernandox64]

Its Work's form me

nav ul a {
font-size: 2.1rem;
color: #FFF;
}
nav,
nav .nav-wrapper i,
nav a.button-collapse,
nav a.button-collapse i {
height: 75px;
line-height: 75px;
}

[clusteratlas]

2017: constrainWidth is now passed as an object option/property upon jquery initialization of the dropdown. Check http://materializecss.com/dropdown.html !

sample (with hover, lol):

$(".dropdown-button").dropdown({ hover: true, constrainWidth: false });

[thetre97]

That works - but only if you keep it hover: true it seems? I wanted it with click, so I added data-constrainwidth="false" into the the button/link, as below. (as per @acburst comment)

<li>
<a class="dropdown-button" href="#!" data-activates="shop-category" data-constrainwidth="false">Shop<i class="material-icons right">arrow_drop_down</i></a>
</li>

[WampiFlampi]

How do I do this with font size and color. The preset .dropdown-content style keeps resetting my changes.