Materialize: Dropdowns not working

[larikitty]

@Dogfalo, did something change on dropdown's structure?
I have this for button:

<a class="dropdown-button" href="#!" data-activates="dropdowngerencial">
    Gerencial <i class="mdi-navigation-arrow-drop-down right"></i>
</a>

and this for content:

``` C#

• Lançamentos
• Histórico

```

[sophocles7]

Is this button also in the nav-mobile? If so, the ul will need to be duplicated and given a separate id.

[larikitty]

Yes, the button is in nav-mobile.
Are you saying that I need two ul's: one for nav and another for nav-mobile?

[sophocles7]

Right. That changed in .96; not sure if it was intentional - not documented. (with different ids, of course)

[larikitty]

Bullseye! :clap:
Now, I have 3 dropdowns: all of them is not right aligned and only one (the one with icons) is not width-constrained.
Hover and Origin are ok.
Here's my activation javascript:

$(".dropdown-button").dropdown({ hover: false, belowOrigin: true, constrain_width: false, alignment: 'right' });

[Dogfalo]

Please make a code pen for this, then we can take a look

[larikitty]

Thanks @Dogfalo, but I'll do more tests before post something. On a smaller version of my page it worked. I'll investigate the code a little bit more. Maybe some miscode on Razor is generating the error. If after this investigation the error still persists, I'll complement this issue with the requested pen.

[larikitty]

Hey, @Dogfalo...
I've tested and can't find the problem.
Here's the code pen.
As I said to @sophocles7, only the last menu is misaligned.

[sophocles7]

Don't think this is a good solution, and don't really know what is causing the problem, but the problem is the icon. If you add it anywhere inside the dropdown link, it is displaced.

By adding an inline style to the icon, I could push it back in line with a negative top-margin.

<li>
    <a href="/Configuracao/Notificador"><i class="mdi-navigation-apps left" style="margin-top: -1.4rem;"></i> Notificador</a> </li>

Probably should be a real fix, tho.... Maybe should have started a different issue since this isn't the original problem.

[larikitty]

Oh...I see.... Thanks @sophocles7. I'll apply this solution temporarily and open a new issue as you suggested.
Thanks again for all your support.

[nosajnosliw]

I'm having this same problem. The Dropdown decides whether it wants to work for the mobile nav or for the regular nav. And when it does work you have to tweak the dimensions so that it doesn't end up with scroll bars.

[nosajnosliw]

I"ve updated to the newest version of javascript and the drop down hover won't work. It won't stay on the screen when you try and navigate to an item, and when I put hover false, constrain width is always true even though I've st it as false and below origin is false even though its set at true. look and see www.nosajnosliw.com. I'd rather have my drop down work than have the parallax.

[KevinBollengier]

I am having a same issue, is there any update on this...?

[tomscholz]

@KevinBollengier Which version are using? This issue is from 2015 and has not reported again since

[KevinBollengier]

It must be a pretty recent version, I've also worked with Materialize since 3 months now.. I managed to fix my problem by copy pasting the dropdown-content for every single dropdown and changing the ID, but this seems a rather odd way to fix the issue?

[tomscholz]

Which version are using?

Please create a codepen in a reduced test case that replicates the issue.

[kama7]

In version 1.0.0-rc.1
It can be solved using Option: coverTrigger

$(".dropdown-trigger").dropdown({
      coverTrigger:false     //If false, the dropdown will show below the trigger.
    });

[corey-fu]

Thanks to @kama7 !
You saved my day !