Can't center tickboxes inside flexbox


No matter what I do, tickboxes refuses to get in the center of their container.
Here’s what they look like currently :

And I want them to look like that :

I tried pretty much all possible combinations of flex-align-self, flex-grow, flex-shrink, padding, margin, flex-align-content, flex-align-items, flex-justify-content, etc. I don’t what to do now.

I’m thinking I could rewrite the LookAndFeel::drawTickBox in C++ to manually place the tickbox, but I would need the coordinates and dimensions of the container. I’m not sure that’s possible.

Any help would be greatly appreciated.

I wonder what the bounds of the TickBox looks like. When you activate the “Edit” mode and select the tickBox, what are the bounds you see?
My hunch is that is is always left aligned to make room for the ButtonText, even though there is none. In that case it’s indeed a mistake/shortcoming in the LookAndFeel.

I found a method “changeWidthToFitText()” in juce’s ToggleButton, that sounds like what we need. But how can we do it in a generic fashion?
While it fits your layout, it would destroy layouts where the ToggleButtons are under each other.
Also I don’t really know where it should be called, since it will contradict what the flexbox layout is doing.

Seems the ToggleButton needs a Justification setting

Hi Daniel,

Thanks for your reply. With the default settings that come when first generating the UI, here’s what the bounds look like:

The tickbox does seem left-aligned no matter what, so maybe your explanation is right. Is there a way to overwrite the drawTickbox function to fix this? Did you have to do anything similiar with the slider class?

No, the Sliders behaved like expected from the start.

I think overriding the Checkbox to go to the centre when there is no text makes sense. We can put that into the Foleys LookAndFeel, it inherits LookAndFeel_V4 and doesn’t do anything bespoke. So you still have the choice between the original and the centred version by selecting the right LookAndFeel.