First style does not work

Ignition
1

Hey,

I've come across an interesting bug on Ignition version 8.1.47.

Worth noting: I tried to replicate this on another 8.1.47 server but was unable to. I also tried restarting the server but to no avail.

After a lot of testing to figure out why my perspective style class (not is stylesheet.css) doesn't work, I figured out that the first class from top to bottom does work properly, like the style is not applied. I checked the DOM in the browser and found the style class is applied to the div:

<div data-component="ia.display.label" data-component-path="C$0:1.0:1" class="psc-factory_floor/a/dummy_style ia_labelComponent" style="display: flex; flex-direction: column; justify-content: center; position: absolute; left: 45.93%; top: 28.57%; width: 2.6%; height: 4.57%;"><span>Label</span></div>

Running the following in the console returned an empty list:

[...document.styleSheets]
.flatMap(s => {
try {
return [...s.cssRules];
} catch {
return 
;
}
})
.filter(r => r.cssText && r.cssText.includes("dummy_style"))
.map(r => r.cssText)

This all leaves me to believe I've found some weird bug with styles...

I tried looking up if this was solved in a later version but couldn't find anything.

My current workaround is to have a sacreficial style at 'a/dummy_style' but I guess that's less than ideal.

Any insight would be helpful.

2

This sentance confuses me, which is it the style works and is applied or it doesn't work because it isn't applied?

For what it is worth, CSS works on a Top to bottom hirarcy, styles which are declared later in the document take precedence all things equal.

You can force your styles to take precendence in other ways, but this is difficult in the style class editor. Ignition inserts style classes at the end of the compiled CSS so style classes should take precedence based on source order, but if an earlier class declared by Ignition has a higher specicifity, or is marked !important, you styles may not be applied.

As for the script not finding a reference to your dummy_style, I am not suprised. I believe that user provided styles are compiled into the CSS at runtime on the gateway, and then sent to the client. The script console runs in Vison Client scope and so, doesn't really have access to that information.

Testing the the browser is always prefered. Perhaps move the script into a button on the view, so that you can run it in a prespective scope.

3

I suggest you look for errors in your CSS, as sometimes these can impact all CSS that follows and effectively disable it. I forgot a colon (or something equally silly) in my stylesheet one time near the top of a longish file, and all of a sudden half my styling was gone

4

Thank you both for your suggestions, but after a long nights sleep and a bit of luck I figured out what is going on. I made a mistake in my stylsheet.css:

image
image463×192 5.42 KB

I accidentally added an extra }.

Best guess is that Ignition compiles the stylesheet.css and the Ignition styles into one CSS file from top to bottom which caused the first selector, in this case 'dummy_style' not to work...

image
image200×404 9.99 KB

Hopefully this helps someone else in the future...

5

Isn't that what I said? :slight_smile:

6

My bad. Gave you the solution. :stuck_out_tongue: