Section flickering caused by #EXPAND-PLUSMINUS generated by Container Skin
Each container skin rule will wrongly generate below class in generated CSS.
#EXPAND-PLUSMINUS:hover,#EXPAND-PLUSMINUS:hover .header h2,#EXPAND-PLUSMINUS:hover .header .icon-openclose,#EXPAND-PLUSMINUS .header:hover,#EXPAND-PLUSMINUS .header:hover h2,#EXPAND-PLUSMINUS .header:hover .icon-openclose,#EXPAND-PLUSMINUS:hover .header {}
However, the "#EXPAND-PLUSMINUS" is not prefixed with any class. So what happens is they will try overriding each others. Many times we have to specify "!important" to reinforce particular css rules. Obviously this work-around will cause other maintenability issue.
It will also cause flickering issue in designer studio, if you changed line-height or font size. To be more specific, when you mouse over whichever section with a header, the font size/line-height of entire section(not only the header, maybe due to inheritance) will be changed according to "#EXPAND-PLUSMINUS:hover" snippet. As consequence, the overall height will be extended or shrinked accordingly, Which make it extremely hard to click on one particular control. You can imagine how it can decrease the productivity drastically.
FYI, the pega verison is 7.3.1.
Accepted Solution
Pegasystems Inc.
US
Upon reviewing the associated SR, I see that this was resolved and SA-61313 Additional Cascading Style Sheets display after Skin rule update was generated as a resolution.
If you have the same issue, please refer to the SA above.
Pegasystems Inc.
US
Hi,
This sounds like a product bug that would potentially require a hotfix to resolve the issue. If you would like to get this fixed could you create a Support Request (SR) and reference this post in SR? Once you get the SR number, could you add the number as a comment to this post so that the moderation team may track it?
Thanks!
-Meghan
NCS Group
SG
To developer: Besides the meaningless id, there is another bug.
instead of
.layout-outline-default h1.header-title,
.layout-outline-default h2.header-title,
.layout-outline-default h3.header-title,
.layout-outline-default h4.header-title,
.layout-outline-default h5.header-title,
.layout-outline-default h6.header-title {
...
}
please do something like this
.layout-outline-default>.header h1.header-title
Make sure you only apply the style to its direct child, not all off-springs.
Accepted Solution
Pegasystems Inc.
US
Upon reviewing the associated SR, I see that this was resolved and SA-61313 Additional Cascading Style Sheets display after Skin rule update was generated as a resolution.
If you have the same issue, please refer to the SA above.