Icon Link widgets not spaced evenly - Support and Troubleshooting

Icon Link widgets not spaced evenly Issue In the Service Portal, Icon Link widgets appear uneven when certain icons are hidden due to access restrictions. This leaves blank spaces where hidden icons would normally appear, causing a misaligned layout.

Symptoms When impersonating a Local End User, some icons are not visible, leaving gaps in the row.

Release All Releases

Resolution Option 1: Use Responsive Rows and Columns Use two separate rows — one with 3 columns, and another with 2 columns. Use visibility conditions to toggle between them based on user access.

Example (HTML Template):

Benefits: Maintains even spacing by switching layouts. No JavaScript needed for simple visibility handling.

Option 2: Dynamically Adjust Layout with JavaScript Use JavaScript to dynamically calculate visible widgets and apply a class or inline style to evenly space them.

Example (Client Script): function adjustIconSpacing() { var container = document.querySelector('.icon-container'); var icons = container.querySelectorAll('.icon-link:visible'); var iconCount = icons.length; icons.forEach(function(icon) { icon.style.width = (100 / iconCount) + '%'; }); }

setTimeout(adjustIconSpacing, 200); // wait for rendering

HTML

CSS .icon-link { float: left; text-align: center; } Best Practice Recommendation Use Option 1 for simpler use cases with predictable access logic.

Use Option 2 if access combinations vary significantly and you want a truly responsive dynamic layout without duplicating rows.