Perspective Radio button size

[dkylep]

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…

I’m just looking for options to make radio buttons (and check boxes) more touch friendly. Thanks

[dkylep]

I did find this thread. My users have been complaining about radio and checkbox size on touchscreen devices.

Perspective toggle switch size

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...

[ray]

@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.

Add width/height style props to each of the states to accomplish this. For example, on the “Big 'ol checkbox” above I used:

[dkylep]

This is GREAT NEWS!!
Thank you

[jcaudle]

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?

[ray]

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.

[pascal.fragnoud]

Hello Ray,

Where are we standing on that feature request ticket ?
This feature would be much appreciated.

Have a good day

[ray]

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.

[pascal.fragnoud]

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 ?

[ray]

Sure thing. First, check out my resource on the Ignition Exchange. While not specific to your use case, the installation instructions 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.

[pascal.fragnoud]

Thanks a lot Ray, I’ll give it a shot.

[yin.cheng]

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…

[ray]

It looks as though you’d need a custom theme to target and override the size of checkboxes within the table component more specifically.

[victor_lefebvre]

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.

[ray]

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.

Could you post screenshots or code snippets to demonstrate the specific code and styles that are being overridden?

[victor_lefebvre]

Hi,
So, i created a custom theme called custom_theme where in the file common/radio.css I put this piece of code :

.ia_radioGroupComponent_radioWrapper{
	padding:0px;
}

and here is what I obtain :

I solved this problem using the !important css option but it is not a clean solution.

[Rahul_Bhakte1]

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?

[dkylep]

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.

[Rahul_Bhakte1]

@dkylep
Strange!
I did the same but still somehow it is not working for me

[pascal.fragnoud]

Check if you have css that would override this in the stylesheet.