CODEWITHSUNDEEP
next.jsheadless-ui
aboutjquery
aboutjquery

Reputation: 922

Why should headlessui hide the scroll bar of the web page when opening the dropdown menu? Even add padding-right: 17px?

It is always added automatically when opening the menu.

overflow: hidden;
padding-right: 17px;

Is there a way around this?

I don't need to do much when opening the dropdown menu, I'm using nextjs , tailwindcss and headlessui

I just discovered that the same thing happens with Dialog...

please tell me how to do it, thank you

Upvotes: 2

Views: 267

Answers (1)

PlatonSterh
PlatonSterh

Reputation: 11

As mentioned in the docs, you can avoid this behavior by adding modal={false} prop to MenuItems. Like so:

<MenuItems modal={false}></MenuItems>

It will disable scroll locking, focus trapping, and making other elements inert.

Upvotes: 1

Related Questions