Pushed content with Semantic UI visible sidebar is too wide

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/