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.

Select dropdown size and layout break when scaled

See original GitHub issue

What package has an issue

@mantine/core

Describe the bug

Scaling the Select component breaks the dropdown size and layout

Initially the size of the dropdown seems to be calculated correctly but its positioned wrong. After moving focus or hover it gets placed correctly (centred) but gets sized as scale 1

example transform: scale(0.75)

In which browser did the problem occur

Chrome, Firefox

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/xenodochial-feather-rozeyb

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Possible fix

No response

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

rtivitalcommented, May 2, 2022

positionDependencies were added to Select, MultiSelect and Autocomplete components in 4.2.2 release.

1reaction

rtivitalcommented, Apr 30, 2022

It is an issue with Popper.js, hopefully it will be fixed in v5 after migration to floating ui

Top Results From Across the Web

Select Dropdown going out of screen in mobile view

Edit: Try putting position: absolute with width: 100%. should pull that div outside of the container. You're asking an element to stretch wider ......

scale() - CSS: Cascading Style Sheets - MDN Web Docs

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by...

Scale a worksheet - Microsoft Support

Click the Page Layout tab on the ribbon. In the Scale to Fit group, in the Width box, select 1 page, and in...

[Solved] allow zoom without affecting layout - CSS-Tricks

Currently, I have many media query breakpoints. Another example here: Let say, I have a device with 480px width, by default (100%) it...

How to insert and remove page breaks in Excel - Ablebits

Pick the needed columns and select the Insert Page Break option from ... you may have the Fit To scaling option selected (Page...