Pushed content with Semantic UI visible sidebar is too wide - semantic-ui

Question

When using a visible Semantic UI sidebar the content in pusher is too wide. It has the width of the browser window, not the width of the available space.
<div class="pushable">
<div class="ui left vertical inverted visible sidebar menu">
<a class="item" href="/">Item</a>
</div>
<div class="pusher">
My content
<table class="ui red table"><thead><th>1</th></thead>
<tbody><td>Test</td></tbody>
</table>
</div>
</div>
See a jsfiddle here:
http://jsfiddle.net/xh9p6tgb/1/

Answer 1

If you want to have an always visible sidebar-like element, then you could try using just Semantic UI Menu instead of sidebar. It's built in classes should be enough so that you can use it as a side menu and scale your content accordingly.
The sidebar isn't designed to automatically scale content that is within the pusher element. Instead, it it designed to be a transient menu which will either overlay or push content to the side.
You can change sidebar animation types during initialization using the animation option, for example:
// Add javascript here
$(document).ready(function() {
$(".ui.sidebar").sidebar({
transition: 'overlay'
});
});
However, if you want the sidebar to be animated but also have a pinned function, then you will most likely have to implement that yourself. Possibly something like adding a pinned class to the sidebar, or just use the visible class to determine if the pusher should shrink by using some CSS:
.ui.sidebar.visible ~ .pusher {
width: calc(100% - 260px);
}
Unfortunately, the animation looks a little strange like this but it's usable.
You can see it here http://jsfiddle.net/rkkmLtzn/