1

So, I have a header and a footer:

<div id='footer' class="ui bottom sidebar">
<div id='header' class='ui top sidebar'>

And, the JS:

$('#header').sidebar('show');
$('#footer').sidebar('show');

The problem is having two sidebars shown at the same time causes the first one to be readjusted. From what I see, Semantic uses margin to push elements on or off screen, presumably with some sort of CSS transition. By having the footer active, it seems to push the header off the screen. Making the header fixed didn't help the situation. How can I have two sidebars active at the same time with no conflicts?

Any suggestions?

ilrein
  • 3,833
  • 4
  • 31
  • 48

1 Answers1

3

By default, the Semantic UI Sidebar module is exclusive; in other words, only one can be open at a time. Semantic will hide other sidebars automatically when a new one is shown.

You can change this behavior by configuring your Sidebars like so:

$('.ui.sidebar').sidebar({
    exclusive: false
});
$('.ui.sidebar').sidebar('show');

(Example jsFiddle)

This Javascript will cause both of your Sidebars to be set to non-exclusive, and then show them both. This functionality is noted in the Semantic UI docs for the Sidebar module:

http://semantic-ui.com/modules/sidebar.html#/settings

oconnerj
  • 326
  • 1
  • 3
  • 7