# 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:** 3

<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:** [October 20, 2025, 9:38pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/41 "2025-10-20T21:38:13Z")

</div>

It works, as far as it will calculate the font size based on the expression, however it's just not that predictable. The experience with it in the designer is also horrible, as you mention, as the font size is typically very small while designing, and a more normal size on the client making it hard to design for. Which is why I now use rem units and change the font size with media queries.

---

<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:** [October 21, 2025, 12:17pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/42 "2025-10-21T12:17:47Z")

</div>

So I finally used media query to handle mobile stuff. But rather than do it on the individual items, I used it to set rem at the html level and it seems to be working pretty well that way. A 4x multiplier got things sized pretty decently (including those darn handles on docks).

```python
/* Set rem */
/* Mobile first - gets a 4x multiplier to the large screen size */
html {
    font-size: calc((1vw / 19.2) * var(--base-font-size) * 4);
}
@media (min-width: 640px) {
    html {
        font-size: calc((1vw / 19.2) * var(--base-font-size));
    }
}

```

---

<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 21, 2025, 6:58pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/43 "2025-10-21T18:58:12Z")

</div>

What does this `html` line do and how does it get used/called?

> [@tgarrison](#):
>
> ```python
> html {
> font-size: calc((1vw / 19.2) * var(--base-font-size));
> }
> 
> ```

---

<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:** [October 22, 2025, 12:15pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/44 "2025-10-22T12:15:02Z")

</div>

It goes in your advanced stylesheet. Basically, it adjusts the “base-font-size” (I have that set at 16px) based on the width of the viewport (vw).

I target a 1920px screen. The 1vw represents 1% of the vw, so at my target size, 1% of 1920 is 19.2. Divide by 19.2 yields 1, so it doesn’t change my base-font-size. Any other size screen either increases or decreases it proportionally.

It works for most normal screens. But when you get to mobile devices the standard scaling doesn’t quite work. Hence using the media query with a default (mobile first approach) of 4x whatever the calc comes out with.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 22, 2025, 2:17pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/45 "2025-10-22T14:17:45Z")

</div>

A selector without prefix (`#` for id, `.` for class...) applies to an html tag.  
You can target all `h1` tags for example. or `body`... or `html`, which is the whole thing

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 4, 2025, 1:16pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/46 "2025-11-04T13:16:38Z")

</div>

Here is my modest contribution based on @nminchin’s new indicator. Same premise, but this adds a red asterisk to signify a required field. Note, I have this located in a style folder, `Overlays/RequiredField`.

```javascript
.psc-Overlays\/RequiredField {
	padding-left:10px;
	position: relative; 
}
.psc-Overlays\/RequiredField::after {
	content: '*';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 5px;
	height: 5px;
	color: #ff0000;
	font-size: 1.0rem;
	font-weight: bold;
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/600bb1d4f20bc25ce757e38ae54833eefe89628b.png)

---

<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:** [November 5, 2025, 2:25am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/47 "2025-11-05T02:25:25Z")

</div>

# Styling Tree Component Items

I forgot to add this here a while ago.. Here’s some useful stuff for styling the Tree component.

```css

/ *********************** /
/* Tree View Component */

/* Select tree items that contain specific text E.g. "UPDATE"*/
.tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select tree items that contain text "UPDATE" and any of its child nodes */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]), .tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select the child nodes of tree items that contain text "UPDATE" */
   Does not select the item that contains "UPDATE" itself. */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]) {
  background-color: aliceblue;
}

/* Select items that use a specific icon */
.tree-row:has(svg[data-icon="material/functions"]) {
  background-color:lightslategray;
  color:#fff;
  font-weight: bold;
}

/* Change the "hover" style of items */
.ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) {
  background-color: #ffda3344 !important;
}

```

Example (bold and aliceblue background for rows that contain the “material/functions” svg icon):

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

To apply these styles below to only Tree components with a specific Perspective Style class assigned, add the psc path to the start, separated by a space. e.g. this part `.psc-Components\/EndNodeOpacity `below:

```python
/* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */
.psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] {
    background-color: aliceblue;
}

```

---

<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:** [November 5, 2025, 3:15am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/48 "2025-11-05T03:15:01Z")

</div>

## Allow Tree Item Text to Wrap

To make tree item text wrap, you can use these styles (some _may_ not be strictly needed…):

```css
/ ********************************************************************** /
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
    height: fit-content !important;
    padding: 1px 0px; /*added this*/
}
.tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap; /*added this*/
}
.text-scroll{
    padding-top:2px;
    overflow-wrap: anywhere !important; /* forces the text to wrap to fit the width */
    white-space:pre-wrap !important;
}
.label-wrapper-icon {
    display: block !important;
    padding-top: 4px;
}
.terminal-alignment.last-child{
    height: 16px !important;
}
.terminal-alignment .cross-alignment{
    height: 16px !important;
}

.tree .tree-item-label .label-wrapper{
	align-items: start;
}
/*------------------------------------------------------------------------*/

```

Example:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/124933939c8e6a9d25f984a2e1b9ce850af6cc17.png)

---

<div class="post-metadata">

**Author:** ![a.alghannam](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/a.alghannam/32/75158_2.png) [@a.alghannam](https://forum.inductiveautomation.com/u/a.alghannam)\
**Post date:** [November 5, 2025, 7:51am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/49 "2025-11-05T07:51:58Z")

</div>

Gemini is so capable. but! give Grok a try you won’t regret it

---

<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:** [November 5, 2025, 9:24am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/50 "2025-11-05T09:24:37Z")

</div>

> [@a.alghannam](#):
>
> Gemini is so capable

For code it’s really not, the hit rate is very low in my experience unless it’s extremely simple. I haven’t tried Grok much for code yet, I’ve been happy with Claude.

Edit: I just tried Grok for something complex, a python function call logger class to log function calls to a database and present it in a Tree component. It did alright, in that it works. I’m pretty happy with the 3rd or so pass, definitely useable!

---

<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:** [November 5, 2025, 8:54pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/51 "2025-11-05T20:54:08Z")

</div>

Gemini 2.5 Pro works pretty well on code. But you have to be explicit with it that you're using Ignition 8.1, writing python 2.7. And then you have to know what you're actually doing, so you can tell if it makes sense. But I use it when I write a bunch of code, and know I need to do some refactoring. It can point out good ideas and help do a quicker refactor.

---

<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:** [December 2, 2025, 8:38pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/52 "2025-12-02T20:38:40Z")

</div>

Very neat! What are you using this for? Some sort of logging of function execution with the arguments provided to them?

---

<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:** [December 2, 2025, 8:40pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/53 "2025-12-02T20:40:30Z")

</div>

Yes exactly. I can log things to it within the function as well to log key values or decisions made. Very handy for debugging without a debugger, and applied to any function with a simple function decorator

---

<div class="post-metadata">

**Author:** ![dillon](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dillon/32/81537_2.png) [@dillon](https://forum.inductiveautomation.com/u/dillon)\
**Post date:** [December 2, 2025, 9:20pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/54 "2025-12-02T21:20:29Z")

</div>

> [@nminchin](#):
>
> root fontsize

Yo Nick, do you know of any proven implementations regarding text size based on parent container width?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [December 2, 2025, 9:29pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/55 "2025-12-02T21:29:43Z")

</div>

I'm starting to get fond of container queries. Some older browser versions may not support it, so double check on that.

- `cqw`: 1% of a query container's width
- `cqh`: 1% of a query container's height
- `cqi`: 1% of a query container's inline size
- `cqb`: 1% of a query container's block size
- `cqmin`: The smaller value of either `cqi` or `cqb`
- `cqmax`: The larger value of either `cqi` or `cqb`

---

<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:** [December 2, 2025, 10:17pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/56 "2025-12-02T22:17:13Z")

</div>

I can see this being difficult to avoid a huge number of font sizes in the project. Do you find this?

> [@dillon](#):
>
> any proven implementations regarding text size based on parent container width

Not that I've ever seen, my biggest concern would be what I said avove

---

<div class="post-metadata">

**Author:** ![Marek\_Uhlir](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@Marek\_Uhlir](https://forum.inductiveautomation.com/u/Marek_Uhlir)\
**Post date:** [December 3, 2025, 12:15pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/57 "2025-12-03T12:15:57Z")

</div>

From my testing, `cqi` only works if the parent is explicitly set as a query container, e.g.:

```python
container-type: inline-size

```

Have you tested this as well?

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [December 3, 2025, 12:18pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/58 "2025-12-03T12:18:33Z")

</div>

I was just testing this exact thing.  
You need to set a parent with a container-type to enable the container units within the that component.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [December 3, 2025, 1:30pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/59 "2025-12-03T13:30:14Z")

</div>

~~So far, I've only experimented with `cqw`, and I have _not_ needed to use the `container-type` property with it.~~

For it to work properly, dgillbee was right.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [December 3, 2025, 2:28pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/60 "2025-12-03T14:28:10Z")

</div>

> [@nminchin](#):
>
> difficult to avoid a huge number of font sizes in the project. Do you find this?

So far, no, but I have only started using it on a few small views. I definately am not an expert with these things, but I am having better results with `cq` than with `vw`, `em`, `rem`, etc.

It maybe that `cq` aligns better with my personal brand of madness rather than being the more idiomatic method.

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

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