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:
2 Likes
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.
Very neat! What are you using this for? Some sort of logging of function execution with the arguments provided to them?
1 Like
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
1 Like
Yo Nick, do you know of any proven implementations regarding text size based on parent container width?
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 widthcqh: 1% of a query container's heightcqi: 1% of a query container's inline sizecqb: 1% of a query container's block sizecqmin: The smaller value of eithercqiorcqbcqmax: The larger value of eithercqiorcqb
1 Like
I can see this being difficult to avoid a huge number of font sizes in the project. Do you find this?
Not that I've ever seen, my biggest concern would be what I said avove
From my testing, cqi only works if the parent is explicitly set as a query container, e.g.:
container-type: inline-size
Have you tested this as well?
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.
1 Like
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.
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.