Perspective radio group

Ignition
1

Is there a way to control the spacing between radios?
In column orientation they use a lot of real estate
Thanks

Ross

2

Here's how to figure it out:

image
image752×546 52.4 KB

  • Launch the view in the browser and hit F12 to turn on Developer Tools.
  • Use the Inspect Tool (1) and hover around the component until you find the problem. In this case it's the green padding (2) on the radio button.
  • In the Styles tab (3), find the padding setting. Here we can see that it's set to 10px.
  • Copy that block of CSS and paste it in to Project Browser | Perspective | Styles | Advanced Style Sheet. Edit it down to,
.ia_radioGroupComponent_radioWrapper {
    padding: 10px;
}

Change the padding to something like 2px and save. It should now update in Designer. If you go back to the browser and Update in the popup you should see the modified layout.

The way this works is that the Advanced Style Sheet loads after the main theme has been loaded. The last loaded of any duplicate style classes is the one that is applied so it overrides the main theme CSS.

1 Like
3

Thank you
Where do I find:
Project Browser | Perspective | Styles | Advanced Style Sheet

Is this in designer? If so, can’t find it

4

What version of Ignition are you using? Advanced Stylesheets were released in 8.1.22, so if you're using an earlier version you won’t have access.

But yes, they're in the designer

5

I’m using 8.1.36 (b2024010211)

Sorry, I didn’t find it yet

6

Searching for "Advanced Style Sheet" in the docs would lead you to Style Classes | Ignition User Manual, which says:

Enabling the Advanced Stylesheet

Changed in 8.1.22

Users with extensive background working with CSS are now able to fine tune styling by modifying the Advanced Stylesheet resource. The stylesheet is an advanced feature and is not placed by default. To enable the Advanced Stylesheet, right-click on the Styles folder and select Enable Advanced Stylesheet.

300×269 22.7 KB

1 Like