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.