RTL support?

[urosursej]

Hi there,

I was wondering if there is any plan for implementing RTL support?

[malte-wessel]

Hey! What exactly do you need?

[Hazantip]

@malte-wessel, i am too interested in RTL, this means that if you have direction="rtl" you will see both scrollbars - native & custom< because you hiding native scrollbar with margin right, but for RTL you need the opposite.

[eyal1990]

@malte-wessel currently, as @Hazantip mentioned, one of the scrollbars appears on the left in rtl. This results in 2 scrollbars showing in both sides.

I believe that the expected behavior is for the scrollbar(s) to appear in the right both in left to right and right to left because this is the default behavior on the web as I see it in every rtl supported site.

[HamidBasri]

you can use this option renderView={props => (<div {...props} style={{ ...props.style, marginLeft: props.style.marginRight, marginRight: 0, }} /> );}

[ilanbd]

Hi @HamidBasri, I have the same issue, renderView={props => (<div {...props} style={{ ...props.style, marginLeft: props.style.marginRight, marginRight: 0, }} /> );} The solution that you proposed only hide the legacy scrollbar but the custom scrollbar is still showing on the right side instead of on the left.

Thanks!

[sonekera]

Hi @HamidBasri, I have the same issue, renderView={props => (<div {...props} style={{ ...props.style, marginLeft: props.style.marginRight, marginRight: 0, }} /> );} The solution that you proposed only hide the legacy scrollbar but the custom scrollbar is still showing on the right side instead of on the left.

Thanks!

Hi @ilanbd, you should set bottom and top props too!

The default value I guess is 2px;

In my case I set it like: style={{...scrollProps.style, left: '2px', bottom: '20px', top: '20px', borderRadius:'3px'}}`

Cheers!

[naomipol]

This is what worked for me:

const trackRtlStyle = rtl ? {left: '2px', right: 'auto'} : {};
...
        renderTrackVertical={props => (
                        <div {...props} style={{
                            ...props.style,
                            left: 2,
                            bottom: 2,
                            top: 2,
                            borderRadius: 3,
                            ...trackRtlStyle
                        }} />
                    )}

[khakestani]

I have another problem in Horizontal scrollbar. When my container is RTL , dragging scrollbar handler don't work correctly, and container's contents move when scrollbar handler cross the middle of the page