Semantic-ui: Sidebar pusher make fixed margin without ref sidebar size

[vit1251]

Documentation provide skinny sidebar usage manual without explains most custom styles.
I use "ui left sidebar inverted vertical menu icon labeled fixed" combo.
What pusher combo I should use? Could you explain it in documentation page.
Thanks.

[awgv]

Hi @vit1251,

Not sure what’s the problem, can you please elaborate? You should be fine if you’ll use only a .pusher class.

[vit1251]

1 - Sidebar
2 - Pusher have a lohg distance
3 - Content out of browser

[awgv]

@vit1251 fork this JSFiddle to show the actual markup behind it please.

[vit1251]

@Banandrew no problem. Try this http://jsfiddle.net/3jkba4wo/2/

[awgv]

@vit1251 If you’re trying to make an always visible sidebar, the sidebar component is not suitable for the task, because it exists to store some kind of hidden content; the .pusher class applies CSS transforms to a page, so your content gets “pushed” to the right—that’s what it’s supposed to do, hence the name. The sidebar’s overlay variation can work in some cases, though, but it depends on what you’re trying to do. Also, the component should be initialized with the .sidebar() method.

So it’s kind of an overkill to use it for a simple always visible sidebar. The documentation uses it only on mobile screens, and implements the desktop sidebar with Flexbox, here’s an example of how it might look. It’s not the first time someone gets confused with the sidebar component’s usage, and we should probably explain it better in the documentation—I’ll try to come up with something.

[vit1251]

@Banandrew yes. I suggest describe two way of situation always visible bar and mobile version JavaScript bar. Now I just fork CSS style from Semantic UI for implement my purposes but in future I can return back when you implement static sidebars. In any case thanks for answer.

[MichalBryxi]

@Banandrew the example is now 404. Can you re-upload or point to a working one please?

[awgv]

Hi @MichalBryxi, sorry about that, I have two: this one is most certainly the same thing I posted in this thread initially, and this one is someone’s modified example that shows a navigation at the top. Please keep in mind that it’s just a quick starting point that’s meant to be modified.

[coder8keyboard]

Semantic-ui doc says "A sidebar can be visible on the page. To have a sidebar appear on page load simply add the class visible to the sidebar.". However, when it renders on screen, the content is too far to the right. Please fix this issue.