Issue with Dropdown misbehaving

Topic: Issue with Dropdown misbehaving

Stefischer asked a year ago

I'm having an issue with the Dropdown component where when clicked, the menu appears on top of the toggle. Also, when using the Dropdown on right of NavbarNav it appears off screen. I've seen similar posts with answers explaining to add the right prop to the DropdownMenu but that does not work for me.

Expected behavior

https://imgur.com/fNR96jt

Actual behavior

https://imgur.com/8sNAEoH

https://imgur.com/0ex8NTl

Resources (screenshots, code snippets etc.)

https://imgur.com/1305Tzm

Add comment

Jakub Chmura staff premium answered a year ago

0 0 Best answer

Hi @Stefischer,

I've tested a dropdown and it works well. I need more code to help you. Please send me an example that will contain the whole navbar and dropdown and its wrappers.

Best, Kuba

Stefischer commented a year ago

Hey!

Thank you for getting back to me. Is this enough code?

https://imgur.com/Bdnbvyx

Add comment

Stefischer answered a year ago

0 0 Best answer

My apologies, with some more in depth testing on my end, it seems that the issue was caused by a separate CSS library package. With it removed, the components functions as intended.

Jakub Chmura staff premium commented a year ago

@Stefischer, No problem.

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

Add comment

Write

Create snippet

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: React
MDB Version: 4.23.0
Device: Desktop
Browser: FireFox
OS: Win10
Provided sample code: No
Provided link: Yes

Stefischer

50Support score
4Questions 3Answers

0Snippets likes 2Snippets

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes

Stefischer

Privacy Preferences