ParisQ07 Member since 2017 20 posts
NCS Group
Posted: 2 years ago
Last activity: 2 years 1 month ago

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.

Low-Code App Development Low-Code App Development Dev/Designer Studio User Interface SR Created
Moderation Team has archived post
Share this page LinkedIn