Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DropdownMenu changes padding / margin on document body.

See original GitHub issue

Bug report

Current Behavior

When active, the DropdownMenu component adds the following CSS to the document body.

  body {
    overflow: hidden !important;
    position: relative !important;
    padding-left: 8px;
    padding-top: 8px;
    padding-right: 8px;
    margin-left:0;
    margin-top:0;
    margin-right: 0px !important;
  }

This can cause layout shift on layouts that have set padding / margin on the body.

Expected behavior

Opening the dropdown should not cause the layout to shift.

Reproducible example

Codesandbox.

Your environment

Software	Name(s)	Version
Radix Package(s)	Dropdown	0.0.1
React	n/a	17.0.0
Browser	Chrome
Assistive tech	n/a
Node	n/a
npm/yarn
Operating System	Mac

Issue Analytics

State:
Created 3 years ago
Comments:16 (3 by maintainers)

Top GitHub Comments

2reactions

mithleshjscommented, May 9, 2022

@mithleshjs I’m confused, display: relative isn’t a thing. Are you talking about position: relative? Regardless, I don’t believe display is set so you shouldn’t have any issue with overrides.

@benoitgrelard Sorry, it was a typo and badly explained. What I meant was even if you set display: flow-root;, the problem still persists due to this style position: relative !important; being applied by the library on the body. The solution that worked for me (using Tailwind):

<body>
   <div className='fixed w-full top-0 bottom-0 overflow-x-auto'>
       content...
   </div>
</body>

2reactions

jjenzzcommented, Mar 30, 2022

@benoitgrelard that doesn’t solve @steveruizok’s recent example unfortunately. the snippet i posted should work for all cases i believe.

Top Results From Across the Web

Dropdown menu moves content - Stack Overflow

In your css add this styles to the current ones. .element { position: relative; } .menu>ul>li>ul { position: absolute; background-color: #555; width: 100%; ......

Simple CSS drop down menu issues - SitePoint

The css technique for showing a drop down requires the drop down to be enclosed in the element that is being hovered while...

How To Adjust the Content, Padding, Border, and Margins of ...

Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to...

How To Create a HTML Dropdown Menu - YouTube

How To Create a HTML Dropdown Menu | CSS Dropdown Tutorial Today we are going ... It is not necessary to use javascript,...

Dropdowns · Bootstrap v5.0

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that's...