CSS from stylesheet not being applied

let's go!

.psc-temp-celciusUnits {
	color: #ff4600;
	font-size: 3rem;
}
.psc-temp-celciusUnits:after {
	content: '°C';
}

and here's the application:
Screenshot 2024-02-01 144423

and here's the result:
Screenshot 2024-02-01 144353

cue the *wah wah waaaah* trombones... nothing has been applied. what am i missing here?

EDIT: these styles do not appear until you either sync or save. :stuck_out_tongue:

EDIT again: BUT! the CSS :after seems to put the content on a new line. which is :goat: :face_vomiting:
Screenshot 2024-02-01 145740

how do i fix THAT??

Pryvit Ian, I am by no means a Perspective Guru, I'm more a Vision guy.

That said, have you looked at:

https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes

вітання! :smiley: yeah. i'm actually working on that on another side-project for my University challenge.

so when i stumbled on this anomaly with the :after putting it's content on a new line... i had to stamp on the brakes and solve that problem because a lot of the theming uses several more 'advanced' CSS attributes. :stuck_out_tongue: kinda letting my webDev background out to play... :partying_face:

EDIT: of course that also means this group would have to PLAN something... ;)

Personally, I would just put the units in the Column header:

FLUID TEMP(°C)

That aside. Often, for "reasons", you have to mark your styles with !important to get them to work as intended.

Css help you won't really find a lot of here on the forum, apart from my self, most people dont seem to have much web background ^^

with all your styles i dont immediatly see which component you are using, label, or input?

The easiest way to fix css is to use the googlechrome inspection tools :slight_smile:

1 Like

It has always struck me as wrong that in CSS if you want something to work you have to mark it as not Important ...

3 Likes

i do NOT need help with CSS. ever. i need help with CSS in Ignition. the :after modification in the real world does NOT add a new line (in fact, you have to take some degree of pains to make it do so). so i need help understanding why it DOES in Ignition. this is a very simple fix for an otherwise pain in the ass problem.

i am not interested in placing text somewhere else. i want to know a solution to this problem. i am fully aware i could put it elsewhere. but that is not what i am tasked with doing. i don't deliver kinda what the client wants. i deliver exactly what the client wants. so knowing what the software can and can't do is critical. this is something the software kinda does. which baffles me. why not just do it properly? completely?

There is no difference, the browser is still responsible for interpreting the style.

Okay, great, but sometimes the client doesn't know what they're asking for. Oh well.

As for your problem, perhaps the new line isn't being inserted by CSS, but is instead part of the value? If I knew what components you were needing it would be a whole lot easier to mock something up and see if I could help arrive at a solution. As it is, I can't, and I won't guess.

Examine the element in the browser. You'll notice that the Label component displays the internal text within a column-oriented flex display. As ::after adds a new pseudo element after the targeted element, you are in essence adding a new element into a column-oriented flex display, resulting in the new element being below.

The Label does this because that was the best option we had for placing Label text in the vertical center of the component; without this setting, all Labels would always display their text along the very bottom - unless users applied complicated stylings to every Label themselves.

3 Likes

okay. now i understand. and i understand why you did it that way. thank you. i'll just have to create a script workaround, which is sub-optimal, but certainly not overly complicated.

thanks again.

Instead of injecting the units, you could apply them as part of the binding. Then your styling would just be used for aesthetic changes.

Screenshot 2024-02-02 at 8.06.05 AM

1 Like

You can also consider setting the EngUnit in the tag definition and use that in an expression. See here:

You can use .psc-temp-celciusUnits span::after to fix this flex issue:after, if its the label component you are using
image
image

You have to use the inspector to see what inner html components igntions usees, because its usually not just one html element that gets important and they all have a bunch of styling

3 Likes

yeah. i spent all day yesterday just deep-diving how the HTML is actually structured. :face_with_open_eyes_and_hand_over_mouth: i am glad i did. i did not expect it to be so... layered. :no_mouth: so, yeah. i came to a similar solution. but thanks for confirming it. i always get a bit nervous positing solutions since this forum is full of very talented and seasoned people.

1 Like