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.
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).
/* 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));
}
}
What does this html line do and how does it get used/called?
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.
2 Likes
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
1 Like
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.
.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;
}
4 Likes
Styling Tree Component Items
I forgot to add this here a while ago.. Hereās some useful stuff for styling the Tree component.
/***********************/
/* 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):
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:
/* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */
.psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] {
background-color: aliceblue;
}
3 Likes
Allow Tree Item Text to Wrap
To make tree item text wrap, you can use these styles (some may not be strictly neededā¦):
/**********************************************************************/
/* 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:
1 Like
Gemini is so capable. but! give Grok a try you wonāt regret it
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!
1 Like
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.