I have a print css that sets .sb-left to display:none. This works fine in firefox but in chrome if you print a page with the left slidebar open the slidebar still prints.

I also have this in my print css

sb-site {min-height:0 !important;transform:none !important;box-shadow:none !important;}

Have you come across this before? Have any suggestions?

I am trying to set custom width (no matter in pixel or percentage) but it is adding fixed negative margin. Because of this the sidebar doesn't fits with the width but leaving empty part.

Any idea or resolution?

I think something wrong happening here

// Set off-canvas margins for Slidebars with push and overlay animations.
if ($left && ($left.hasClass('sb-style-push') || $left.hasClass('sb-style-overlay'))) $left.css('marginLeft', '-' + $left.css('width'));
if ($right && ($right.hasClass('sb-style-push') || $right.hasClass('sb-style-overlay'))) $right.css('marginRight', '-' + $right.css('width'));

// Custom Slidebar Widths
if ($left && $left.hasClass('sb-width-custom')) $left.css('width', $left.attr('data-sb-width')); // Set user custom width.
if ($right && $right.hasClass('sb-width-custom')) $right.css('width', $right.attr('data-sb-width')); // Set user custom width.

May be it is still adding negative margin if using off-canvas.

I have found a bug involving 0.9's new animation styles 'push' and 'overlay' when using iOS 7 (it works fine on iOS 3 - 6).

There are new modifier classes that can be added to your Slidebars .sb-style-push and .sb-style-overlay which alter the animation style. You can see an example at the Slidebars website, open the right one.

I've done a little searching and it seems iOS 7 has some errors involving z-indexes, I have tried some suggestions of using translateZ, but had no luck.

The interesting part is when you plug in your iOS device, and use Safari to debug it. If you open a Slidebar, there is no visual change and looks like it hasn't opened. However the markup has, the Slidebar has been translated and is in the correct place. Using the developer tools to turn off the z-index and then clicking it back on again, for some reason makes it work.

The issue seems to be on elements that have been translated, have a z-index, and possibly when fixed, as this doesn't occur when the standard reveal animation is used.

Any suggestions or solutions would be really appreciated.

Thanks, Adam

PROBLEM: When page load, the Slidebars with "sb-style-overlay" class take a right margin when "sb-right" and a left margin when "sb-left". After open one first time, the error dead and the slidebars are correted.

SOLUTION: Apply the margin-[right/left] in the "transform: translate([value])" value.

TEST: Only in Chrome 37.0.2n m

Thanks for the plugin! :D

I'm having an extra space after all my contents/footer. I think its because of the div.sb-site calculating its min-height giving a big white space after the footer.

Hi Adam, I was just testing my prototype page-- which you can see here-- on an older iPad running iOS 5.1.1 and I'm noticing that while loading the page, the slidebars toggle control at the upper left flashes briefly and then disappears; do you have any idea why this might be happening?

Thanks, Nick

I am using the Totomo Wordpress theme as a base theme to expand upon on a site I am creating.

I have checked and confirmed there are no unclosed div tags or extra closing div tags.

The issue I am having is the hamburger menu's don't appear and there is no way to slide open the right or left menus. This is with the latest version of Slidebars.

I have also tested it on the latest 2.0 beta you have published as well. In this case the above remains the same, but now the page becomes unscrollable. I have tracked down that what ever is preventing the page from being able to scroll is located in slidebars.min.css.

I have spent all day trying to figure this out and get it to work, and everything I have tried has resulted in the same result.

Once I added http://stratus.sc/ along with slidebars the plugin began miscalculating the height of the page by about 150px. Any suggestions or possible solutions?

Hi Adam,

Is it possible to have two different contents on the same slidebar area? I mean, supposing I want to display X content selecting the X button and another content if Y button is selected, all on the right slidebar. It would be great.

I have a link to jump to another section of the page. When I click this with the left slidebar open (NB I have set siteClose: false on the page) the page moves to the left and is no longer in line with the header.

To see this in action go to http://webrecipemanager.com and login with user demo p/w demo99

On the landing page open the left slidebar and click the "Add a Comment" link near the top of the page.

Hello. Thank you for your cool plugin!

I have a problem in below env.

• Rails 4.1.1
• Bootstrap 3.1.1 (gem)
• Slidebars 0.9.4 (via bower)
• twitter-bootstrap-rails-confirm 1.0.2 (gem)

I tried use in rails project. Normal modal is works well by this link http://plugins.adchsm.me/slidebars/issues/modal.php

but, when I use "twitter-bootstrap-rails-confirm". I found problem. (sorry, it may not this plugin's problem.)

The gem (twitter-bootstrap-rails-confirm) generate confirm box like a BS modal by JS. When click the cancel button in confirm box. Gray shadow appears. and won't operate.

I attach images.

raw code is below.

<button class="btn btn-default btn-block" data-target="#modal-example" data-toggle="modal" name="button" type="submit">show modal
</button>
<!-- Modal -->
<div aria-hidden='true' aria-labelledby='periodModal' class='modal fade' id='modal-example' role='dialog' tabindex='-1'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button area-hidden='true' class='close' data-dismiss='modal' type='button'>&times;</button>
        <h3 class='modal-title' id='periodModal'>title</h3>
      </div>
      <div class='modal-body'>

          <a data-confirm="sure?" href="/">root</a>

      </div>
      <div class='modal-footer'>
        <button class='btn btn-default' data-dismiss='modal' type='button'>close</button>
      </div>
    </div>
  </div>
</div>

HTML generate by twitter-bootstrap-rails-confirm

<div xmlns="http://www.w3.org/1999/xhtml" class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title"> </h4>
  </div>
  <div class="modal-body">sure?</div>
  <div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn cancel btn-default">キャンセル</a>
    <a href="#" class="btn proceed btn-danger btn-primary">OK</a>
  </div>
</div>

sorry my english.

I'm trying to import this library to my project in laravel. have installed with NPM:

npm install slidebars --save-dev

Then I'm trying to import this library to my app.js file which has the following structure:

import jquery from 'jquery';
import popper from "popper.js";

try {
    window.$ = window.jQuery = jquery;
    window.Popper = popper.default;

    require('bootstrap');
    require('slidebars');

} catch (exception) {
    console.log(exception);
}

$(document).ready(function () {
    let constructor = new slidebars();
});

run npm run watch but then in my browser I get the following error in the console:

ReferenceError: slidebars is not defined

Please, if you could help me, I have searched in different places, but I can not find a solution for it. Thank you very much in advance.

Hello, is it possible to add opacity to the main page when slidebars is open? I followed the answer to a similar question but it doesn't work, I'm thinking maybe it's because I'm using slidebars 2. Thanks.

I have some javascript for button that toggles an off-canvas . I have two containers with non identiacal names My experience is that both of the canvases is pushed. Is it possible to select a canvas, based on the canvas name and only push a specific canvas in the javascript using the Slidebars API?

Filed a bug report here: https://bugzilla.mozilla.org/show_bug.cgi?id=1431893

If you check with Firefox version 57 (not sure how far back this goes but apparently it's fine on version 47) even the demo on your website is severely affected due to CSS transitions on the menubar items.

Workaround is to remove or override overflow properties from [off-canvas] and apply them to a wrapper <div> inside for your content:

[off-canvas] > .slidebar-scroll-container {
    height: 100%;
    overflow: hidden;
    overflow-auto: auto;
}