search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

bug: range does not work when document is rtl but component is forced to ltr #20201

Closed ashishgehlot closed 2 years ago

ashishgehlot commented 4 years ago

Hello Devs,

I was trying to use ion-slider for RTL application but its not working as expected. In LTR mode its working fine. In RTL mode, Knob gets stick in right side and can not change by dragging also value change appears in reverse mode like Dragging from Right to left but animate from left to right.

Here I am adding Codepen project to where I reproduced this issue. Hope it will help you to understand issue. [https://codepen.io/ashishgehlot95/pen/RwNBbpr?editors=1010]

brandyscarney commented 4 years ago

Thanks for the issue! The codepen you added is using a very old version of Ionic, please make sure you're using latest, which is 4.11.8 at the time of this writing. Also, I believe you need to add the dir on the html element: https://codepen.io/brandyscarney/pen/gObjgzK?editors=1010

@abennouna could you confirm this?

abennouna commented 4 years ago

The range issue has been solved in a previous version of Ionic (4.0.2).

I understand that the pen demonstrates an issue when using the dir=rtl on the ion-range element itself.

As a matter of fact, the RTL fix involved checking the direction on the document itself, and does not account for other parent elements, or the slider itself.

So if this is a mixed-direction document, that may be an issue.

ashishgehlot commented 4 years ago

Yes, I am using mixed-direction.

If I remove dir attribute from ion-range works fine but with attribute it breaks . https://codepen.io/ashishgehlot95/pen/mdyajMd?editors=1010
ashishgehlot commented 3 years ago

Any update on this issue ?

FahmiChaar commented 3 years ago

Any option to force component direction to LTR when my app direction is RTL ?

3zzy commented 3 years ago

Its still broken :(

sean-perkins commented 2 years ago

Hello everyone :wave: this has been fixed in #24597 and will be available in the next release of Ionic.

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.