Semantic-UI [Sidebar] does not toggle correctly with Semantic UI RTL build

Hi, Using a sidebar with an RTL build, when it opens, it uses double the space on the right side and when it closes it leaves a visible area on the left side of screen and messes up the elements on the page. I could not use the fiddle as instructed in guidelines because it is a ltr version and could not find a cdn for rtl version to setup another fiddle so I uploaded the files to my server for testing and reproducing the problem. http://behnood.darjade.ir/sidebar.html it is a ui inverted vertical menu sidebar that is toggle by a ui labeled icon button. I removed all other html and css and js to make sure nothing is interfering with this.

Oct 24 '15 09:10 behnoodk

Probably not relevant by now, but you can just give the sidebar element direction:ltr whilst the rest of the body is rtl. It doesn't completely solve the issue, the sidebar doesn't react well wen set to right, but if its on the left it will work great.

Sep 19 '16 00:09 Bodokh

Any updates? I have this issue on 2.2.6. The sidebar is not working properly when using RTL mode.

Jan 04 '17 19:01 ErezSavir

Hi, the original poster’s test case is unavailable, can someone please make a screenshot of the issue at least?

Feb 13 '17 18:02 awgv

Closing the issue until there’s a test case.

Feb 20 '17 01:02 awgv

This is the code I'm using:

<div class="ui sidebar inverted right vertical menu">
    <a class="active item">ראשי</a>
</div>

<div class="pusher">
   ...
</div>

When I type <html dir="ltr">, it looks like this: (Which is fine) https://i.gyazo.com/6e9c2919303d90119808a12f0a43341e.mp4

But when I type <html dir="rtl">, it starts to do something like this: https://i.gyazo.com/30b01f2ca48c100614a841bbbf863f07.mp4

I think it has to do with this rule:

.ui.visible.right.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .pusher {
    -webkit-transform: translate3d(260px, 0, 0);
    transform: translate3d(260px, 0, 0);
}

I tried to do

transform: translate3d(260px, 0, 0) translateX(-100%);

But it refuses to slide to the other side..

Sep 01 '17 10:09 Newbie012

When I changed these lines on sidebar.js, it fixed the issue only on fullscreen:

from this:

distance.left = -width;
distance.right = width;

to this:

distance.left = width;
distance.right = -width;

When I try to see how it works on mobile (using chrome dev tools), it looks like chrome is stretching the document from the left to the right, and that's why we don't see the menu. Because the menu is in the right and we need to horizontally scroll to the right to see him. And when we do that, we're triggering a touchmove event which closes the menu while we try to scroll to the right.

I haven't found a good solution of how to fix this. I've tested it on FireFox and it looks like it works pretty well there.

Sep 04 '17 20:09 Newbie012

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

Jun 05 '18 17:06 stale[bot]

tap

Jun 05 '18 17:06 brody4hire