Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field
Hi there,
A bit more than a week ago a store update for Employee Center was published, version 23.0.5 R. After having updated the plugin, I immediately noticed "odd" spacing on the Navigation Links in the Footer of Employee Center. That definitely was different before! I guess it won't be noticeable that much if you have full-packed Footer with four Navigation Links, though if you only have two or three Navigation Links…
So let's do some digging. Where did this change on the links spacing come from? And what can we do about it, if you don't like this new behavior?
Before plugin update [22.0.11 R]
A snippet of how the Footer looks like with Employee Center 22.0.11 R, with only two Navigation Links attached:
After plugin update [23.0.5 R]
A snippet of how the Footer looks like with Employee Center 23.0.5 R, with only two Navigation Links attached:
Browser inspector
Using the Chrome browser inspector, there's a noticeable difference (probably way more, though this one stands out for me).
The max-width, isn't noticeable on the latest version of Employee Center, though is on the previous version. So something might have changed on a CSS Theme or the Footer Widget. The max-width also dynamically changes on the previous versin of Employee Center. Having four (4) Navigation Links, the max-width would be 88rem. While having two (2) Navigation Links, the max-width would be 44rem.
Widget
Searching for differences between Employee Center 23.0.5 R and 22.0.11 R, amongst others you will find that the "Employee Center Footer" Widget has been updated. Loads of differences, though diving into the Client controller field there's an interesting line with CSS:
Commenting line 82 with the justify-content… the old spacing on the Navigation Links in the Footer is applied again!
Fix
Obviously, you could just comment line 82 of the Client Controller script or remove the line. That would work. I'm just in a bit of doubt if this is the correct way to go. By updating the Widget, you own it. So any future updates on the Widget, you'll pass out on unless you keep track of Skipped Updates.
An alternative to changing the Widget, could be to add CSS to a Style Sheet on the Theme record associated with the Employee Center portal record. CSS like below works the same as disabling line 82 within the Client Controller field of the Employee Center Footer Widget.
.vce046d5773603010c94f54eb7df6a7ec .masonry-root {
justify-content: start !important
}---
And that's it. If any questions, let me know!
| C |
If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful.
Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in? |
Kind regards,
Mark Roethof
ServiceNow Technical Platform Architect @ Quint Technology
2x ServiceNow Developer MVP
2x ServiceNow Community MVP
---
