Gap between vertical left icon sidebar and pusher


Seems like when the icons sidebar loads with class “visible” a huge gap is created between the sidebar and pusher, the gap is as if the default sidebar was in place.

If the sidebar is not loaded with “visible” and toggled, then it displays correctly. Any way to fix this?

Have I structured something incorrectly?

Here’s a JSFiddle:


Hi. The issue is that the pusher is being translate 3D in the X direction, more than what is necessary.
You can look at the sidebar.js file to see how that works.

This issue is mentioned in the Semantic-UI documentation:

Although sidebars support any size content, sidebars that are visible on load only support standard, predefined sizes like thin or wide. This makes sure content can be positioned correctly before Javascript is available.

So you can either use the thin class to make it calculate the distance correctly:
But this would not look the best due to lots of empty space.

Alternatively, you can override the semantic transform property for the pusher and write your own in your main.css