Changing size of the check-square in TUnimCheckbox

[likemike]

Hello!

I have to increase font size of most of the components I use.

Unlikely the TUnimCheckbox doesn't adapt the size of the check-square when I increase the font size (...and I found nothing in terms of checkboxes in ExtJS).

So, how can I change the size of this square?

Regards

Mike

[x11]

use CSS

[likemike]

That doesn't help. What is the classname of the checkbox input?

 I've tried this without success:

.bigcheck input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
}

neither that:

.bigcheck input[type="checkbox"] {
 transform : scale(2.0);
}

 

[Sherzod]

On 3/28/2021 at 2:22 PM, likemike said:

I have to increase font size of most of the components I use.

Unlikely the TUnimCheckbox doesn't adapt the size of the check-square when I increase the font size (...and I found nothing in terms of checkboxes in ExtJS).

So, how can I change the size of this square?

Hello,

How are you changing the font size?

[likemike]

Sorry - I mean the FieldLabelFont -> Font -> Size

[PS1]

Hey @Sherzod i am also looking for the answer. I found global solution for all checkboxes by css:

.x-checkboxfield .x-icon-el:before {
    font-size: 50px
}

.x-big .x-checkboxfield .x-icon-el:before {
    font-size: 50px;
}

But I want to set it only for some of them. I tried adding cls, but it doesn't work. Can you help ?

.clsMyCheckBoxBig .x-checkboxfield .x-icon-el:before {
    font-size: 50px
}

.clsMyCheckBoxBig .x-big .x-checkboxfield .x-icon-el:before {
    font-size: 50px;
}

I'm using:

uniGUI Complete -Professional Edition

Build 1.90.0.1568 

 

[Sherzod]

Hello @PS1

Do you have a simple testcase to check?

[PS1]

Hey @Sherzod, Sorry for my late response. Forgot to enable notification for this topic.

Testcase is in attachment.

CSS part is added in ServerModule->customCSS.

test_case_checkBoxes.zip

[Sherzod]

Hello @PS1

I will try to check.

[PS1]

Any progress ?

[Sherzod]

On 9/28/2023 at 2:55 PM, PS1 said:

Any progress ?

Hello,

Sorry for the late response.

 

Can you try this approach?

1. CustomCSS ->

.customCh.x-checkboxfield .x-icon-el:before {
    font-size: 35px
}

.customCh.x-big .x-checkboxfield .x-icon-el:before {
    font-size: 35px;
}

.customCh.x-big .x-checkboxfield .x-icon-el {
    width: 60px;
    height: 60px;
}

2. UnimCheckBox.LayoutConfig.Cls = customCh

[PS1]

Thanks for the response, but the last part :

 

.customCh.x-big .x-checkboxfield .x-icon-el {
    width: 60px;
    height: 60px;
}

Does not seem to have any effect

 

[Sherzod]

What if you try this?

.customCh.x-checkboxfield .x-icon-el:before {
    font-size: 40px
}

.customCh.x-checkboxfield .x-icon-el:before {
    font-size: 40px;
}

.customCh.x-checkboxfield .x-icon-el {
    width: 80px;
    height: 80px;
}

 

[PS1]

Now it works !

 

Thank you very much ❤️