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