likemike Posted March 28, 2021 Share Posted March 28, 2021 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 Link to comment Share on other sites More sharing options...
x11 Posted March 29, 2021 Share Posted March 29, 2021 use CSS Link to comment Share on other sites More sharing options...
likemike Posted March 29, 2021 Author Share Posted March 29, 2021 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); } Link to comment Share on other sites More sharing options...
Sherzod Posted March 29, 2021 Share Posted March 29, 2021 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? Link to comment Share on other sites More sharing options...
likemike Posted March 29, 2021 Author Share Posted March 29, 2021 Sorry - I mean the FieldLabelFont -> Font -> Size Link to comment Share on other sites More sharing options...
PS1 Posted September 5, 2023 Share Posted September 5, 2023 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 Link to comment Share on other sites More sharing options...
Sherzod Posted September 5, 2023 Share Posted September 5, 2023 Hello @PS1 Do you have a simple testcase to check? Link to comment Share on other sites More sharing options...
PS1 Posted September 12, 2023 Share Posted September 12, 2023 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 Link to comment Share on other sites More sharing options...
Sherzod Posted September 12, 2023 Share Posted September 12, 2023 Hello @PS1 I will try to check. 1 Link to comment Share on other sites More sharing options...
PS1 Posted September 28, 2023 Share Posted September 28, 2023 Any progress ? Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 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 Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 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 Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 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; } 1 Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 Now it works ! Thank you very much ❤️ 1 Link to comment Share on other sites More sharing options...
Recommended Posts