`CheckBox` has more padding on the sides than other components...
...as can be seen on the screenshot with approximate pixel margins.
The components are inside a HorizontalBox but since the margins are different, it must be due to the CheckBox AFAICS. Because of this additional space, combinations of components as seen in the image look off. I tried padding-right:0; but it had no visible effect.
It would be nice to
- have an option to disable all margins on the
CheckBoxso that only spacing of the parent component is applied - (maybe) the space between the checkbox and its text (currently ~12 px) be 8px. Not sure if 8px instead of 12px make it look too cramped.
Here is a picture of how this would look like with ~8px inbetween.
The same problem exists vertically (separator line between widgets; no layout padding and spacing; SlintPad):
This leads to an inconsistent look in my app where I have check boxes with one-line and with two-line text.
Isn't spacing the responsibility of layouts? But the box itself is surrounded by space additional to what a layout adds. This also creates an indent on the left. But on Windows, the check boxes in the Notepad search dialog and the Directory Opus preferences dialog don't have indents.
Hi, thank you for the report. Looks for me there is a wrong value set on the padding.
@FloVanGH: Please reopen. Your change doesn't address the vertical problems!
See this SlintPad demo:
The one-line check box has a greater visual distance from the separator line than the two-line check box. And in general, one-line check boxes are spaced apart far too much. To make it more clear:
@FloVanGH: Please reopen. Your change doesn't address the vertical problems!
See this SlintPad demo:
The one-line check box has a greater visual distance from the separator line than the two-line check box. And in general, one-line check boxes are spaced apart far too much. To make it more clear:
@Enyium have you checked it on master? There should be no more margins around the CheckBox (for all styles`, neither vertical nor horizontal
have you checked it on master?
Yes. The indents to the left of check boxes are gone (so, what I see includes your changes), but the large gap between one-line check boxes as well as the uneven gap for one-line and two-line check boxes next to separator lines are still there.
Your PR only removes the horizontal properties padding-left and padding-right, nothing vertical.
have you checked it on master?
Yes. The indents to the left of check boxes are gone (so, what I see includes your changes), but the large gap between one-line check boxes as well as the uneven gap for one-line and two-line check boxes next to separator lines are still there.
Your PR only removes the horizontal properties
padding-leftandpadding-right, nothing vertical.
Thank you. I think I found the problem it is not a padding. the min-height is to high. Will fix this.
@Enyium https://github.com/slint-ui/slint/pull/6647
it appears the distance for 2 line and 1 line checkboxes is the same for the box but doesn't create extra space for the text. This is an observation based on the visual appearance, not based on looking at any code...
Thanks, I can't see any vertical problems anymore.
But are you sure the gap between box and text isn't too large? It's smaller in other apps I checked, like Firefox (settings), or Directory Opus (Qt-based, I think).
My app uses normal check boxes as well as check boxes with buttons instead of text, and the normal check boxes have a larger gap, which also seems too large. See this SlintPad demo (again, checked with master, of course):
it appears the distance for 2 line and 1 line checkboxes is the same for the box but doesn't create extra space for the text.
I'm not sure a check box should add any free space towards other widgets. And with these recent changes, it doesn't.

