Description
I'm having a strange issue with sidebars. My page has two sidebars, one on the left and one on the right. The structure of my code means the sidebar function is called twice, once to initialise it, and once to attach an event to a button that will make it visible when in a mobile view:
$('.primary.sidebar').sidebar({ transition: 'slide along' });
$('.secondary.sidebar').first()
.sidebar('attach events', '#navigation .item.show-resource-sidebar', 'toggle');
Fairly standard, and more or less how the documentation shows how to do it (without the first step though?)
My two sidebars are defined in the HTML as so (sorry, using HAML):
.ui.left.vertical.primary.sidebar
.ui.right.vertical.secondary.resource.sidebar
The primary sidebar is working as expected, however the secondary sidebar is behaving unusually. The initial sidebar
call works fine, but when the second call to attach events is run, the sidebar moves and becomes a left sidebar. Semantic-UI
is changing the class from right
to left
without me requesting it.
I've tried to replicate in a fiddle, and had partial success. I can't replicate it when my second call is to attach an event, it seems to work as expected, however if I ignore that and make two calls to the initialise itself, it is reproducing it.
https://jsfiddle.net/9hn5fw8w/1/
The second call to dropdown
is commented out, and as you'll see it works correctly. But if you uncomment the second call, the sidebar is moved to the left of the screen.