Semantic-ui: [Sidebar] Wrong size of pusher when visible

[ghost]

Hello,

If I use the same code as provided in your jsFiddle posted on issue [Sidebar] Allow Sidebar to Start Visible #649. the pusher div as the same width than the body without substracting the sidebar width.
This issue is also available in your jsFiddle examples.
How can I have the right width of the pusher div if my sidebar is visible on load ?

[nZeus]

JSFiddle that describes the bug: https://jsfiddle.net/Kpblca4/vnsyavwp/

[andreicojocaru]

I also have a similar problem when trying to have a .ui.container inside a .pusher:
http://jsfiddle.net/rto3b0ab/

The .grid > .column can be taken out, it's there for contrasting the container behaviour.

The temporary workaround was to use this as a pusher:

<div class="pusher" style="width: calc(100% - 150px);">

where 150px is the thin sidebar size.

[arkhamRejek]

I noticed the same issue today

[bjornlll]

Me too. Any approach that doesn't involve hacking the CSS of Semantic UI?

[jleskovar]

Can confirm @andreicojocaru workaround works.

[awgv]

It’s been a while, I explained it here; closing as a duplicate. If anyone has some questions, I’ll be happy to answer them either in this thread, or in our Gitter chatroom.

[xtagon]

@Banandrew my use case is that I want the sidebar collapsed by default on mobile/small screens, and the same sidebar should be always open/static on large screens. I currently use media queries to change the size class as well, but I can't do that to change whether it's static/pinned or not. What do you recommend for that? Can it work with your flexbox jsfiddle example?

[awgv]

@xtagon I think there’re several ways to go here depending on what UI pattern you’re trying to achieve.

If your sidebar should look like it’s attached to a page (like SUI’s documentation), then you can just follow the documentation and create 2 identical sidebars: one will be showing on computer screens and using the same Flexbox pattern as my JSFiddle, the other will be showing only on mobile screens and using the overlaying sidebar component. Resize the documentation to see how it transitions between the two—basically, the desktop sidebar becomes hidden at some breakpoint, and when it does, a button that toggles the mobile sidebar appears.

If your content is centered like here on GitHub, and if it won’t be hidden on computer screens under the overlaying sidebar when it’s shown, you can just automatically show it on such screens, something like that might work:

if ($(window).width() > 768) {
  $('.left.sidebar')
    .sidebar('show')
}

If you show me how it’s supposed to look, I might be more specific.

[xtagon]

@Banandrew Actually what I want is exactly how it works on the SUI documentation. Hides only on mobile, and doesn't use the pusher on desktop. That should get me started. Thanks!

[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.