Skip to Content (Press Enter)
UserImage.jpg
Aman Kumar Bhardwaj
136Views
3Comments
Solved
How to decrease the size of a CHECKBOX widget?
Question
Reactive
1-Click Publish
OutSystems Widgets
Application Type
Reactive

Need to decrease the size of checkbox, but it isn’t decreasing on changing its height, width or size values.

0
0
18 May 2023
Copy Link
2023-04-16 15-25-31
Krishnanand Pathak
Solution

Hi @Aman Kumar Bhardwaj

Add the below CSS to the screen

input.checkbox::before {
    width: 11px;
    height: 11px;
}

input.checkbox:checked::after {
    width: 7px;
}

[data-checkbox]:checked::after {
    left: 2px;
    top: 2px;
    width: 12px;
}


You can check the demo to see how it will work through below link.
https://personal-qmzjggmd.outsystemscloud.com/Com/Checkbox?_ts=638200039395800366

Regards
Krishnanand Pathak


1
0
18 May 2023
Copy Link
UserImage.jpg
Aman Kumar Bhardwaj

Thanks @Krishnanand Pathak
The size has been decreased, but the tick in the checkbox is not aligned to the box, 
This is what I'm getting: 
I need this:

Can you please suggest a way to achieve this with checkbox in the screen?

0
0
18 May 2023
Copy Link
2023-04-16 15-25-31
Krishnanand Pathak

Replying to Aman Kumar Bhardwaj's comment on 18 May 2023 06:02:52

You need to adjust the position left and top based on size of you Checkbox of below CSS

[data-checkbox]:checked::after {
    left: 2px;
    top: 2px;
    width: 12px;
}



0
0
18 May 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.