slint icon indicating copy to clipboard operation
slint copied to clipboard

`CheckBox` has more padding on the sides than other components...

Open alexeyabel opened this issue 1 year ago • 2 comments

...as can be seen on the screenshot with approximate pixel margins. Screenshot_20241020_175441-slint

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

  1. have an option to disable all margins on the CheckBox so that only spacing of the parent component is applied
  2. (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. Screenshot_20241020_175441-slint-8px

alexeyabel avatar Oct 20 '24 16:10 alexeyabel

The same problem exists vertically (separator line between widgets; no layout padding and spacing; SlintPad):

checkbox-padding-problems

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.

Enyium avatar Oct 20 '24 18:10 Enyium

Hi, thank you for the report. Looks for me there is a wrong value set on the padding.

FloVanGH avatar Oct 21 '24 07:10 FloVanGH

@FloVanGH: Please reopen. Your change doesn't address the vertical problems!

See this SlintPad demo:

checkbox-problems

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:

checkbox-problems-annotated

Enyium avatar Oct 24 '24 11:10 Enyium

@FloVanGH: Please reopen. Your change doesn't address the vertical problems!

See this SlintPad demo:

checkbox-problems

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:

checkbox-problems-annotated

@Enyium have you checked it on master? There should be no more margins around the CheckBox (for all styles`, neither vertical nor horizontal

FloVanGH avatar Oct 24 '24 15:10 FloVanGH

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.

Enyium avatar Oct 24 '24 16:10 Enyium

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.

Thank you. I think I found the problem it is not a padding. the min-height is to high. Will fix this.

FloVanGH avatar Oct 24 '24 16:10 FloVanGH

@Enyium https://github.com/slint-ui/slint/pull/6647

FloVanGH avatar Oct 24 '24 16:10 FloVanGH

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...

szecket avatar Oct 24 '24 16:10 szecket

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):

button-check-box

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.

Enyium avatar Oct 24 '24 18:10 Enyium