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.

Appending to body doesn't align the dropdown correctly.

See original GitHub issue

When appending to body, the dropdown isn’t aligned correctly.

Expected behaviour

Dropdown lines up correctly

Actual behaviour

The dropdown position is shifted. It seems to depend on <body> and other elements at the start of the doc to not have any margins. It is positioned 8px off in both x and y due to the <body> margins. If the first element in <body> is an <h1>, which has top and bottom margin of 21.44px, the dropdown is positioned 21.44px too high.

Here is an example of the issue on StackBlitz

More Info

ng-select version: 0.21.0

browser: chrome, firefox

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

rpascalcommented, Apr 23, 2018

Hello, is there any other alternative solutions to this problem?

2reactions

varnastadeuscommented, Mar 4, 2018

@adamk33n3r for now simplest solution would be to set body position: relative

Top Results From Across the Web

How to keep my drop-down menu properly aligned with my ...

Place the dropdown elements inside the footer, then add position: relative to the footer element, and use:

CSS · Bootstrap

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. · Use rows to create horizontal groups ......

Manipulating documents - Learn web development | MDN

Set the text content of the span to the input element value you saved earlier, and the text content of the button to...

Adjust alignment, rotation, and position – Figma Help Center

Select one object or layer: Figma will align the layer to its parent. This could be a group, frame, or the containing frame...

Common problems - The jQuery replacement for select boxes

Select2 does not function properly when I use it inside a Bootstrap modal. ... This issue occurs because Bootstrap modals tend to steal...