Skip to content

[Sidebar] Changes directions if called twice #2644

Closed
@pareeohnos

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.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions