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.

Checkbox vertical alignment bug

See original GitHub issue

What package has an issue

@mantine/core

Describe the bug

Hi, thanks for an amazing library.

I believe there may be a regression in the <Checkbox> component regarding vertical alignment. It appears correct in version 5.4.0 and incorrect in 5.7.1.

My example is based on “Authentication form with title”: https://ui.mantine.dev/component/authentication-title

(It appears that ui.mantine.dev currently uses 5.4.0: https://github.com/mantinedev/ui.mantine.dev/blob/master/package.json)

Using version 5.4.0, the text is correctly vertically aligned:

https://codesandbox.io/s/mantine-checkbox-5-4-0-2v1fvq

Using version 5.7.1, the text is incorrectly vertically offset:

https://codesandbox.io/s/mantine-checkbox-5-7-1-bnbx9j

I believe it may be related to the introduction of mantine-Checkbox-body.

In version 5.4.0, the DOM has mantine-Checkbox, mantine-Checkbox-inner, and mantine-Checkbox-label:

In version 5.7.1, the DOM also includes mantine-Checkbox-body, which introduces extra vertical spacing:

What version of @mantine/hooks page do you have in package.json?

5.7.1

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

https://codesandbox.io/s/mantine-checkbox-5-7-1-bnbx9j

Do you know how to fix the issue

No response

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

Yes

Possible fix

No response

Issue Analytics

State:
Created 10 months ago
Comments:7 (5 by maintainers)

Top GitHub Comments

2reactions

minossscommented, Nov 10, 2022

because Checkbox move flexbox to body children. body’s height is 20px, but checkbox’s height is 26.4px :<

set checkbox root or body to flex <Checkbox styles={{body: {display: 'flex'}}} label="Remember me" />
set parent element font-size to 0 <Checkbox sx={{fontSize:0}} label="Remember me" />

1reaction

rtivitalcommented, Nov 12, 2022

I’ve tested it on the ui.mantine.dev website with 5.7.2 – https://ui.mantine.dev/component/authentication-title Alignment works correctly when sx={{ lineHeight: 1 }} is set. Unfortunately, setting line-height is now required in this case to support new Checkbox features (description and error). Same logic is applied for Radio and Switch components.

Alignment with ruler: Снимок экрана 2022-11-12 в 16 41 22

Top Results From Across the Web

How to align checkboxes and their labels consistently cross ...

One easy thing that seems to work well is to apply a adjust the vertical position of the checkbox with vertical- ...

How to Align a Checkbox and Its Label Consistently Cross ...

Set the vertical-align property to “bottom”, which is consistent across browsers. Set the position property to “relative” to place the element relative to...

Trouble aligning checkbox/radio box in form

The checkboxes appear to be center aligned, with left-aligned labels on the next line. I'd like the checkbox to be left aligned, with...

Vertical align checkboxInput and its label - shiny

I am building a Shiny app using shinytheme cerulean. I have a problem with the vertical alignment of a checkboxInput and the label...

Checkbox Vertical Alignment - DevExpress Support

I have added a checkbox to my Bootstrap project, and its vertical alignment is placed well in XL and XS viewports where their...