Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field
| The issue described in this content, has been fixed by ServiceNow in Employee Center Store version 28.0.4. |
Hi there,
With the recent Employee Center store release, amongst the new features and fixes, also some bugs have been introduced 🙂 . One of the minor bugs, the styling of the Order section on the Service Catalog Item page. Hopefully ServiceNow will address this bug, and fixes this in a future store release some months from now. Though what can we do ourselves about this? Let's investigate a temporary low impact fix.
Bug
The styling bug on the Service Catalog Item page which we are after. It's a minor one, though for end users doesn't look pretty.
CSS
Seeing such styling, my thought immediately goes to having a look at if this can be changed using CSS within the Widget Instance, applying Page specific CSS, or applying a CSS Include on the Service Portal Theme record. Similar like I described in another article, "Styling old Service Portal widgets on Employee Center".
Widget instance CSS
Using the browser inspector, we could investigate how the page is built, which styles are applied, etcetera. To investigate the HRM Catalog Item widget and especially the Order section, right-mouse click on the Order section and select "Inspect".
Sometimes you do have to play around a bit, to find the right CSS elements. Selecting "div.sc-fixed" the styles visible look interesting to me, and comparing this with a previous version of Employee Center: "padding: 2.4rem" is missing.
Next is the "Required information" part on the Order section. Again applying right-mouse click on the Order section and select "Inspect" to find the right CSS elements.
Selecting "div.panel.panel-default.b.wrapper-md" the styles visible look interesting to me, and comparing this with a previous version of Employee Center: "padding: 0 !important" is missing.
With the knowledge gained in the previous steps, we can write our CSS in the CSS field of the Widget instance. The quickest method to access the Widget instance, is to Ctrl + right-mouse click on the HR Catalog Item widget and select "Instance in Page editor". In the CSS field, we could apply the code mentioned earlier.
.v3c29786e87133200e0ef0cf888cb0bdf .right-side-cart > div {
padding: 24px;
}
.v3c29786e87133200e0ef0cf888cb0bdf .right-side-cart > div .panel-default {
padding: 0 !important;
}
Result
After saving the Widget instance record and refreshing the Employee Center Service Catalog Item page, the bug vanished 🙂 Obviously I hope ServiceNow fixes this bug in a future store release some months from now.
---
Hope you like it. If any questions or remarks, 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
Independent ServiceNow Consultant
3x ServiceNow Developer MVP
3x ServiceNow Community MVP
---
