Problem with rtl direction
See original GitHub issueWhen I use rtl direction for container sort is not working correctly
demo: https://jsfiddle.net/eckfano0/2/ video: https://www.useloom.com/share/03959b86fb3447b39248a4ff4721e0f2
.item {
cursor: move;
padding: 8px;
border: 1px solid red;
}
.container {
display: flex;
flex-direction: row;
direction: rtl;
}
Is there any way to support rtl direction?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:4
- Comments:10
Top Results From Across the Web
right to left - Html direction attribute is not working
In my webpage I set the locale to arabic and want to change the direction of the content display from right to left...
Read more >RTL is not working correctly with text align · Issue #1743
So the RTL is not working fine. We could try with something like: body[dir="rtl"] { direction: rtl; text-align: right; }.
Read more >Structural markup and right-to-left text in HTML
This article looks at ways of handling text direction for structural markup in HTML, ie. at the document level and for elements like ......
Read more >direction
The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, ...
Read more >Right-to-left Styling
To avoid this issue, set the appropriate language direction whenever possible. Once dir="rtl" is set on the element, it will appear as expected....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi, I needed this option for my project, So I solve it for myself and create this PR. But I was sure this would not be reviewed as fast as I expect or may not be accepted, I put rtl version in npmjs.com to use it, it works completely fine, and works with latest version on that date.
https://www.npmjs.com/package/react-sortable-hoc-rtl
videos: float based flex based
I change and use this CSS code in this file https://github.com/PersianArt/react-sortable-hoc/blob/master/index.html
html, body, #root { width: 100%; height: 100%; direction: rtl; } body { background-color: #cdcdcd; display: table; color: #333; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif; margin: 0; } #root { display: table-cell; vertical-align: middle; } .sortable-container { padding: 0; width: 1200px; margin: 0 auto; display: block; overflow: hidden; white-space: nowrap; } .sortable-item { float: right; display: inline-block; list-style: none; width: calc(25% - 10px); height: 200px; margin: 5px; background-color: #fff; text-align: center; line-height: 200px; }
for flex only add these codes at end of .sortable-container
display: flex; flex-direction: row;
Hope this is useful. If you want this option add to project, Please ask the author to review this PR
Hi i created a PR and added RTL support to last version with supporting Keyboard Sorting.
https://github.com/clauderic/react-sortable-hoc/pull/794