# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 28, 2025, 3:10am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/21 "2025-01-28T03:10:13Z")

</div>

Not sure technically in this instance, but setting `visibility` without it will simply hide the tab and not shift the others and take its place. It acts more like setting `visible` on a component in a flex, and adding `position: absolute` acts like `display`

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [January 28, 2025, 3:17am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/22 "2025-01-28T03:17:13Z")

</div>

Its the way the positioning works. Setting it to absolute will set it to 0,0 on a different layer basically. If you set two things to absolute and give them the same top and left they will be overlayed. Same thing is happening there.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 28, 2025, 3:28am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/23 "2025-01-28T03:28:15Z")

</div>

I guess it also pulls it out of the flex that the other tabs are in which is why they're able to collapse the space

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [January 28, 2025, 4:04am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/24 "2025-01-28T04:04:09Z")

</div>

I wonder if you could replace

```css
position: absolute
visibility: hidden

```

with

```css
display: none

```

and get the same thing.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [January 28, 2025, 1:41pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/25 "2025-01-28T13:41:13Z")

</div>

Or possibly `visibility: collapse`

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 28, 2025, 9:50pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/26 "2025-01-28T21:50:25Z")

</div>

That didn't work, I did try that, still needed absolute

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 12, 2025, 9:00pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/27 "2025-03-12T21:00:54Z")

</div>

You can use `style.position: absolute` to take a component out of a flex container and position it anywhere within the flex. For example to move it to the bottom, offset by 2px from the bot left and set its width to the width of the containing flex minus 4px to give a 2px offset from the flex side bounds:

```python
style.
  position: absolute
  left: 2px
  bottom: 2px
  width: calc(100% - 4px)
  height: 4px

```

In some cases this is preferable to using a coord container. For example I use this to put icons (no priv, confirmation required, etc - these themselves are container within a flex) in the top right of my button template with exact size and pixel offsets from the bounds, regardless of the size the button is embedded as. You can't\* do this in a coord container (\*that I know of).

However, sometimes the positioned component will appear relative to the wrong outer container, eg in the top right of the entire page. In this case, add this into the containing flex container:

`style.position: relative`

I'm sure someone will pipe in with the reasons why this is needed and under what circumstances (i haven't found the time to look into it)

---

<div class="post-metadata">

**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\
**Post date:** [March 13, 2025, 7:20pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/28 "2025-03-13T19:20:51Z")

</div>

Don't have anything clever to add but I just wanted to say this is a goldmine, thank you all for sharing! The composable style systems and repeating roller SVGs I thought we're especially awesome 🙂

---

<div class="post-metadata">

**Author:** ![Biri](https://avatars.discourse-cdn.com/v4/letter/b/a3d4f5/32.png) [@Biri](https://forum.inductiveautomation.com/u/Biri)\
**Post date:** [March 13, 2025, 7:56pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/29 "2025-03-13T19:56:40Z")

</div>

How can one create this style, so it can applied to components in the designer.

Thank you

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 13, 2025, 8:00pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/30 "2025-03-13T20:00:07Z")

</div>

Copy and paste the CSS into the Advanced Stylesheet in your project and save it.

Then on the component, set the `props.style.classes` to `pulse-shadow`

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [March 13, 2025, 8:22pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/31 "2025-03-13T20:22:49Z")

</div>

If you don't see an advanced style sheet you need to add it to your project. You do this by right clicking on the "Styles" section and selecting the option for the advanced style sheet. I forget exactly what it says but I typically enable that on all of my projects these days.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 13, 2025, 9:36pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/32 "2025-03-13T21:36:14Z")

</div>

> [@richardNZ15](#):
>
> this is a goldmine

That was definitely the intention of it!

---

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [May 19, 2025, 9:01pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/33 "2025-05-19T21:01:08Z")

</div>

I'm going down the same journey.. have calculated px on my primary window, and wrote those values to session.custom so i can ref them from wherever. Then moved to em. Now playing with rem, calculating out a rem value in :root{}. What's caused you to go back to the clamp?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 19, 2025, 9:58pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/34 "2025-05-19T21:58:17Z")

</div>

_cough_ I've gone back to rem.. 😵 But defined media queries in the stylesheet to change the root fontsize based on resolution..

fwiw, this is what I've been testing with, and it seems to be holding up ok...

```python
/* Default root font size (applies to all screen sizes unless overridden) */
html {
  font-size: 16px; /* Base size: 1rem = 16px */
}

/* For small screens (e.g., mobile phones). Note this is larger than the tablet size otherwise it's too small on mobile*/
@media screen and (max-width: 480px) {
  html {
    font-size: 14px; /* On small screens: 1rem = 14px */
  }
}

/* For medium screens (e.g., tablets) */
@media screen and (min-width: 481px) and (max-width: 1499px) {
  html {
    font-size: 12px; /* On medium screens: 1rem = 15px */
  }
}

/* For large screens */
@media screen and (min-width: 1500px) {
  html {
    font-size: 18px; /* On large screens: 1rem = 18px */
  }
}

```

---

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [May 20, 2025, 12:10pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/35 "2025-05-20T12:10:12Z")

</div>

Nice. I haven't played with the media queries. I'm currently giving this a try. Not sure I like starting at a 5px base. I'm probably going to move it to 10 or 16. 10 makes for easy math to get to my standard font sizes at our common resolutions. The little bit of math does a pretty good job of dialing font size respective to resolution so it stays pretty well scaled to all the other stuff.

Biggest thing I've noted so far, I've had to adjust the sliders and checkbox styles to bump their size due to my 5px rem. Moving to 16px I think would allow me to not have to do that.

```python
:root {
  --base-font-size: 5;
}

html {
  font-size: calc((1vw / 19.2) * var(--base-font-size));
}

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 20, 2025, 12:39pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/36 "2025-05-20T12:39:16Z")

</div>

16px is the default rem size if you don't set it yourself, which is why I started there 🤷‍♂️

Who am I kidding, I didn't write it, it was [Claude](https://claude.ai/new) who wrote it for me after I was cursing at my `calc` font sizes not behaving, I just tweaked it a smidge 😅

---

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [May 20, 2025, 12:50pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/37 "2025-05-20T12:50:51Z")

</div>

Yeah, that's why I'll probably head back to 16 as my start point. Make designer more realistic that way as well (really wish Designer handled CSS better).

Gemini has been my friend..

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 20, 2025, 12:51pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/38 "2025-05-20T12:51:34Z")

</div>

> [@tgarrison](#):
>
> Gemini has been my friend..

I use Claude.ai, it's _far_ better at code (thanks @chaoliang )

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 25, 2025, 1:25am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/39 "2025-07-25T01:25:30Z")

</div>

Hide the select alarm checkbox column on the Alarm Status Table:

```python
.psc-Components\/AST\/HideSelectColumn .tc.ia_table__cell[data-column-id="select"] {
    display: none;
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/f/bf086d9ef75ff7eba43ee28f87e7f7e6be220644.png)

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 20, 2025, 8:34pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/40 "2025-10-20T20:34:55Z")

</div>

So does the `calc` and `clamp` not work any longer?

I am trying to use some styles, that I created a while back, in a new project, but I don't see any effect at all in the browser, as far as font sizing goes. In the Designer, I can make it super small, and it's normal in the browser.

[Previous page](https://forum.inductiveautomation.com/t/useful-css-stuff/95414.md?page=1)

[Next page](https://forum.inductiveautomation.com/t/useful-css-stuff/95414.md?page=3)