How Do I Add A Space Between The Box And Caption Of The TUniCheckBox?

[Frederick]

I am using the theme "uni_win11_polar_light". 

The space between the box and the caption in the TUniCheckBox is too small. How do I add a space between the box and the caption?

I tried "&nbspChange" for the caption but it showed "nbspChange". For some reason, this same method works for a TUniRadioButton.

--
Frederick
(UniGUI Complete - Professional Edition 1.95.0.1576)
 

[Sherzod]

Hello,

30 minutes ago, Frederick said:

&nbsp

It would be correct to put ";" at the end:

 

 

[Frederick]

It seems that  Change does not work.

Using & Change or &&nbspChange works.

[Sherzod]

Very good. 

[Thiago Moraes]

Instead of using "&nbsp" for space, you can try using the "Padding" property in the CSS or styling options for your TUniCheckBox. Adjusting the padding should give you the space you need between the box and the caption.

[Frederick]

Doesn't padding create space around the control rather than between the box and the caption?

[Sherzod]

30 minutes ago, Frederick said:

Doesn't padding create space around the control rather than between the box and the caption?

You can also use CSS globally for all elements.

[Frederick]

Thanks. May I have the code to put in CustomCSS?

[Sherzod]

6 hours ago, Frederick said:

Thanks. May I have the code to put in CustomCSS?

Well,

1-Possible solution: Using the !important rule in CSS (but) is generally considered to be bad practice because it overrides all other styles, regardless of their specificity. 

.x-form-cb-label {
    padding-left: 22px !important;
}

2-Possible solution: Using extra class.

  2.1. LayoutConfig.Cls = customCB

  2.2. 

.customCB .x-form-cb-label {
    padding-left: 22px;
}

...

[Thiago Moraes]

Instead of using "&nbsp", try using the "Margin" property if it's available for TUniCheckBox in your theme. You can increase the margin to create some space between the box and the caption.

[Frederick]

9 hours ago, Sherzod said:

Well,

1-Possible solution: Using the !important rule in CSS (but) is generally considered to be bad practice because it overrides all other styles, regardless of their specificity. 

.x-form-cb-label {
    padding-left: 22px !important;
}

2-Possible solution: Using extra class.

  2.1. LayoutConfig.Cls = customCB

  2.2. 

.customCB .x-form-cb-label {
    padding-left: 22px;
}

...

Thanks. This is a better solution.