# Sizing Component-Embedded Icons Using "%" Instead of "px"

**URL:** <https://forum.inductiveautomation.com/t/sizing-component-embedded-icons-using-instead-of-px/115895>\
**Category:** Ignition\
**Tags:** perspective, ignition83\
**Created:** [June 8, 2026, 11:41pm UTC](https://forum.inductiveautomation.com/t/sizing-component-embedded-icons-using-instead-of-px/115895 "2026-06-08T23:41:12Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [June 10, 2026, 7:15pm UTC](https://forum.inductiveautomation.com/t/sizing-component-embedded-icons-using-instead-of-px/115895/6 "2026-06-10T19:15:38Z")

</div>

This appears to mostly work. I only am handling bottom and left dock pushes, as that is all I have pushing. My right is cover, and I don't use a top.

I set the variables elsewhere in rem units.

Push docks have to be un-resizable. If you figure out how to handle resizing, let me know.

```python
/* =========================================================================
   DOCKED VIEW SIZING
   ========================================================================= */
.docked-view.docked-view-left { width: var(--left-dock-width) !important; }  
.docked-view.docked-view-left[style*="left: -"],
.docked-view.docked-view-left[style*="left:-"] {
    left: calc(-1 * var(--left-dock-width)) !important;
}
.docked-view.docked-view-right { width: var(--right-dock-width) !important; }
.docked-view.docked-view-right[style*="right: -"],
.docked-view.docked-view-right[style*="right:-"] {
    right: calc(-1 * var(--right-dock-width)) !important;
}
.docked-view.docked-view-bottom { height: var(--bottom-dock-height) !important; }
.docked-view.docked-view-bottom[style*="bottom: -"],
.docked-view.docked-view-bottom[style*="bottom:-"] {
    bottom: calc(-1 * var(--bottom-dock-height)) !important;
}
.docked-view.docked-view-top { height: var(--top-dock-height) !important; }
.docked-view.docked-view-top[style*="top: -"],
.docked-view.docked-view-top[style*="top:-"] {
    top: calc(-1 * var(--top-dock-height)) !important;
}

/* Catch Left/Right docks when Bottom is pushing, regardless of Designer px settings */
.docked-view.docked-view-left:not([style*="height: calc(100% - 20px)"]),
.docked-view.docked-view-right:not([style*="height: calc(100% - 20px)"]) {
    height: calc(100% - var(--bottom-dock-height) - 0px) !important; 
}

/* Adjust main view to deal with dock widths */
.center:not([style*="max-height: calc(100% - 20px)"]) {
    max-height: calc(100% - var(--bottom-dock-height) - 0px) !important;
    margin-bottom: var(--bottom-dock-height) !important;
}
.center:not([style*="max-width: calc(100% + 0px)"]) {
    max-width: calc(100% - var(--left-dock-width)) !important;
    margin-left: var(--left-dock-width) !important;
}

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/sizing-component-embedded-icons-using-instead-of-px/115895)._