✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Divider in dbc.DropdownMenuItem does not appear

Hello all

I have a problem which makes me crazy. I have a Navbar from the “dash_bootstrap_components” library. Inside this Navbar I have three dropdowns over

dbc.DropdownMenuItem

Between the elements of the dropdown I set dividers like this

dbc.DropdownMenuItem(divider=True)

Now the problem: Sometimes the divider really appears, sometimes not. I have no idea why (tried zIndex without success).

Does somebody of the community have an idea (in the picture you see that there is one divider missing, although it is in the code!)?

image

Thanks to all and best,
Matthias

Is there any chance you could post a minimal example that reproduces this? Perhaps just a simple Navbar with the same CSS as your bigger app?

If that’s not possible, the best way to diagnose this is probably to start by using the inspector in your browser to see if the divider is being rendered and what styles are being applied / what’s stopping it from being visible.