# Perspective Radio button size **URL:** \ **Category:** General Discussion\ **Tags:** perspective\ **Created:** [March 26, 2020, 3:58pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443 "2020-03-26T15:58:50Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [March 26, 2020, 3:58pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/1 "2020-03-26T15:58:50Z")
Is it possible to increase the size of the perspective check boxes or radio buttons? My interface will be mainly on a touch screen tablet and I’ve already received feed back that check boxes can be hard to click because they are too small. Or, can individual radio button areas be formatted (size or color)? I thought if I gave the radio button area some gradient shading, like a button, people would know they could click on the text of the radio button too. Something like this… ![radio](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/fe1c2a9639d1987f806ea0d020275c219d030cff.jpeg) I’m just looking for options to make radio buttons (and check boxes) more touch friendly. Thanks ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [April 20, 2020, 5:00pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/2 "2020-04-20T17:00:22Z")
I did find this thread. My users have been complaining about radio and checkbox size on touchscreen devices. > [@Perspective toggle switch size](http://forum.inductiveautomation.com/t/perspective-toggle-switch-size/22905/2): > > Well, for starters. There is no system default toggle switch in regards to the browser. Toggle switches are either a checkbox element or a tree of divider elements configured to provide the appearance and behavior of a toggle switch. In our case it is the latter, although our initial implementation was a checkbox. We could dynamically scale the toggle switch and all it’s internal elements, but this could lead to other problems as a result of making things way more complex than they need to be… Just wondering if there are any additional thoughts on this... ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [April 24, 2020, 6:02pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/3 "2020-04-24T18:02:50Z")
@dkylep This is now possible in our nightly builds. The component theming implementation adds more styling capability to the Radio Group and Checkbox components. They’re now based on SVG icons instead of system OS defaults. ![02%20AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/369481fa9f70739051713edd2bf4a61bc8990bd0.png) Add width/height style props to each of the states to accomplish this. For example, on the “Big 'ol checkbox” above I used: ![11%20AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/0/0019b1d85d214f9cee4eaeec9061b035a2604873.png) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [April 24, 2020, 6:21pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/4 "2020-04-24T18:21:25Z")
This is GREAT NEWS!! Thank you ---
**Author:** ![jcaudle](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jcaudle](https://forum.inductiveautomation.com/u/jcaudle)\ **Post date:** [October 13, 2020, 12:36pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/5 "2020-10-13T12:36:40Z")
Is there a way to change the spacing between rows of radio buttons? Like when your window pushes some buttons to the next row and there is a large space between rows? ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [October 13, 2020, 4:11pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/6 "2020-10-13T16:11:09Z")
Outside of manipulating the theme files or creating a custom theme to do so, I don’t see a straightforward way to do this in the product today. I’ll add a feature-request ticket internally for this level of control @jcaudle. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [February 10, 2021, 10:22am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/7 "2021-02-10T10:22:09Z")
Hello Ray, Where are we standing on that feature request ticket ? This feature would be much appreciated. Have a good day ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [February 10, 2021, 10:32pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/8 "2021-02-10T22:32:15Z")
Hi Pascal, that ticket has yet to be prioritized. I’ve added your additional request to the issue so we can track that and hopefully get it into an active dev sprint soon. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [February 11, 2021, 8:57am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/9 "2021-02-11T08:57:50Z")
Thanks Ray, How would I go about doing this by manipulating theme files or creating a custom theme ? Any resources you could point me to by any chance ? ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [February 12, 2021, 7:14pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/10 "2021-02-12T19:14:20Z")
Sure thing. First, check out my resource on the [Ignition Exchange](https://inductiveautomation.com/exchange/2076/overview). While not specific to your use case, the [installation instructions](https://inductiveautomation.com/exchange/2076/installation) will give you a good idea of how theming works and what’s all involved in the process of overriding our built-in themes to create your custom theme. For more information, see the markdown README file located in the Gateway’s installation directory: `%installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md` You’d need to identify and override the `ia.` CSS class names which control the radio group’s vertical spacing. Keep in mind that this is a fairly advanced endeavor and custom themes are not officially supported by IA. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [February 15, 2021, 8:47am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/11 "2021-02-15T08:47:37Z")
Thanks a lot Ray, I’ll give it a shot. ---
**Author:** ![yin.cheng](https://avatars.discourse-cdn.com/v4/letter/y/85f322/32.png) [@yin.cheng](https://forum.inductiveautomation.com/u/yin.cheng)\ **Post date:** [February 27, 2022, 11:28am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/12 "2022-02-27T11:28:31Z")
Hi @ray , just wondering if the width/height style props is applicable for the perspective table column? With render=boolean, boolean=checkbox, i have tried setting the style to width:80px, height:80px, but i dont see any change in the size of the checkbox… ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [February 28, 2022, 4:38pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/13 "2022-02-28T16:38:03Z")
It looks as though you’d need a custom theme to target and override the size of checkboxes within the table component more specifically. ---
**Author:** ![victor\_lefebvre](https://avatars.discourse-cdn.com/v4/letter/v/b5a626/32.png) [@victor\_lefebvre](https://forum.inductiveautomation.com/u/victor_lefebvre)\ **Post date:** [June 27, 2022, 1:07pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/14 "2022-06-27T13:07:41Z")
Hello, I created a new custom theme with custom padding on .ia\_radioGroupComponent\_radioWrapper and when inspecting the page, it shows that this css is called but it is overloaded by PerspectiveComponent css. I don’t quite understand how the css is layered in ignition. Could you help me please. ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [July 6, 2022, 12:08am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/15 "2022-07-06T00:08:54Z")
Depending on how a component was authored, you may run into the “default” styles overriding your own in a custom theme like this. This is helpful overview of how CSS works in Perspective: [Understanding CSS, Selectors, and Specificity in Ignition Perspective - YouTube](https://www.youtube.com/watch?v=nTzKGn4QGYo). Could you post screenshots or code snippets to demonstrate the specific code and styles that are being overridden? ---
**Author:** ![victor\_lefebvre](https://avatars.discourse-cdn.com/v4/letter/v/b5a626/32.png) [@victor\_lefebvre](https://forum.inductiveautomation.com/u/victor_lefebvre)\ **Post date:** [August 3, 2022, 8:31am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/16 "2022-08-03T08:31:46Z")
Hi, So, i created a custom theme called custom\_theme where in the file common/radio.css I put this piece of code : ```auto .ia_radioGroupComponent_radioWrapper{ padding:0px; } ``` and here is what I obtain : ![css_overwrite](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/195b19906923679ec2a9e6a660f4437c6ce9bc14.png) I solved this problem using the `!important` css option but it is not a clean solution. ---
**Author:** ![Rahul\_Bhakte1](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@Rahul\_Bhakte1](https://forum.inductiveautomation.com/u/Rahul_Bhakte1)\ **Post date:** [July 24, 2024, 10:22am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/17 "2024-07-24T10:22:20Z")
Hello @ray With this I am able to change the size of the radios but not the size of the text next to it. I also don't see any styling specifically for the text. Can you please help? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea18bc55e214ff38654c9f03f4ce6569d8f394b4.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/f/ef0a32fa6f336ca2358a87df13ceb9fa16b6f405.png) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [July 26, 2024, 4:36pm UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/18 "2024-07-26T16:36:49Z")
Just set the 'fontSize' in the components style prop. You could bind the fontSize to the icon width or height size if you want them to be linked together. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8e1c54d8a409dc3c3bcf9a5d18c91c2718fd255.png) ---
**Author:** ![Rahul\_Bhakte1](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@Rahul\_Bhakte1](https://forum.inductiveautomation.com/u/Rahul_Bhakte1)\ **Post date:** [July 29, 2024, 5:35am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/19 "2024-07-29T05:35:02Z")
@dkylep Strange! I did the same but still somehow it is not working for me ☹ ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/4/f4118ff35d4514f1de276c4b55853f1956fa6963.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/4/a4c9f5639622d4f415727fd5cae1127032b9aaab.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 29, 2024, 8:49am UTC](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443/20 "2024-07-29T08:49:14Z")
Check if you have css that would override this in the stylesheet. [Next page](https://forum.inductiveautomation.com/t/perspective-radio-button-size/33443.md?page=2)