CODEWITHSUNDEEP
htmlcss
Wavegunner232
Wavegunner232

Reputation: 61

Resolving issue with Materialize dropdown

For reference:

  1. The tool I'm using: https://materializecss.com/
  2. The outcome I have: https://i.sstatic.net/IRZHk.jpg
  3. The outcome I want: https://i.sstatic.net/N6Itv.jpg

I have a dropdown on the navbar of my webpage. Before adding the class 

.sidenav-trigger

To the following :

<li><a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"><i class="material-icons">settings</i>Settings</a></li>

Which is sat inside of the following <ul>:

<ul id='dropdown1' class='dropdown-content'>
  <li>
    <a href="{% url 'FullSearch:Search' %}" style="color: black;"><i class="material-icons">search</i>Search</a>
  </li>
  <li>
    <a href="{% url 'UserProfiles:UserProfile' Username=UserName %}" style="color: black;"><i class="material-icons">person</i>Profile</a>
  </li>
  <li>
    <a href="{% url 'Discover:DiscoverPage' %}" style="color: black;"><i class="material-icons">public</i>Explore</a>
  </li>
  <li>
    <a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"><i class="material-icons">settings</i>Settings</a>
  </li>
  <li>
    <a href="{% url 'UserLogout:LogoutPage' %}" style="color: black;"><i class="material-icons">arrow_back</i>Logout</a>
  </li>
</ul>

The dropdown looks as intended.

Simply removing this class won't work as I need it in order to have a pullout sidebar.

How can I resolve the alignment of the text in the dropdown?

Upvotes: 2

Views: 51

Answers (1)

hsusanoo
hsusanoo

Reputation: 914

Try setting the height to auto !important as following:

<li>
  <a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black; height: auto !important;">
    <i class="material-icons">settings</i>
      Settings
  </a>
</li>

Upvotes: 1

Related Questions