It feels like overnight the styling of all components in perspective changed, without us making any changes to the Styles folder. I inspected the difference in DevTools for a label in one of my views, and I noticed that the style segment is now gone. I am quite unfamiliar with CSS so I am not sure where this segment originally came from. Does anybody know how to get this styling back in perspective?
Before style change:
After style change:
Not sure if it's your issue, but one time I noticed peculiar things with my component styling. Some styling was missing which I hadn't touch, although I had made some changes to other styling. It turned out I'd missing something, perhaps an ending semi-colon, I don't remember, but it invalidated the rest of the styles that followed. From memory this was either in the adv. Stylesheet or my css theme files
Or you could’ve missed a curly bracket. It happened to me.
Sometimes adding a semicolon on the end of a style in the normal stylesheet can cause this to happen. You can copy/paste your styles from the normal styles section into a text editor to see if you did that because you'll have a double semicolon at the end of one of your styles (it adds the semicolon for you behind the scenes).
Edit:
I should have included an example.
For example, If you create a style called "NewStyle" and put "linear-gradient(to top, rgb(170,170,170), rgb(200,200,200));" in the background image property it will create this in the stylesheet
.psc-NewStyle {
background-image: linear-gradient(to top, rgb(170,170,170), rgb(200,200,200));;
}
The strange thing is that we have not made any changes to the stylesheet in months, and now all of a sudden we get this issue. I copied the stylesheet into vscode to check for syntax errors such as double brackets, but I found none. I also checked for the semi-colon issue, but this also it not the problem.
This looks like a precedence issue. On the top pic, the style in use looks like it is not from your CSS but from the inline styles attribute on "body".
The second picture shows the same CSS is present but the inline attribute in missing.
Though the problem is CSS related, it is not necessarily related to a change in your spreadsheet.
Do you have a shot from the DOM to show the "DIV" for this object?
Hi @jacob.baran, the DOM looks like this:
I indeed suspect that the problem is not in the CSS itself. It rather seems that some CSS style that was applied before is not there anymore, and I don't know why.
In this shot I don't see anything trying to use the pcs-Text/DropdownTitle class. Is it on the label for the push buttons?
I think the indicator is that in your original captures, all the font related attributes from light.css.227 are present, as in still loaded into the working CSS, but they have been overridden by the same attributes in the inline style for the label.
This makes sense because inline styles are higher priority than classes. This is generally why I consider it bad practice to use inline styles for base values, though it is convenient to make the changes in the designer.
I would look at the template for these in the designer and see if there were attributes assigned under the styles prop at one time. If those exsisted and were removed, I suspect this similar behavior would happen.
You can try to use a test class with the font attributes from the 'working' diagnostics capture and apply it to the label and see if it reverts back to the working state.
For a second opinion, I may have misinterpreted the diagnostic a bit.
It looks like .psc-Text/DropdownTitle is from your CSS but the only attribute assigned is font-size.
The lower CSS I was refering to is just the light theme.
Anyway, there is something I noticed when using the CSS from the designer spreadsheet vs. using variables assigned in the theme, if you are using a custom theme.
Either way, I think the totality of the style you were used to seeing was not entirely from your class but now it is.
The font-family list is peculiar and perhaps that can be the breadcrumb worth following to find the source.
