react-sortable-hoc
react-sortable-hoc copied to clipboard
Problem with rtl direction
When 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?
+1
+1
+1
+1
+1
+1
+1
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
@PersianArt thank you it's worked fine
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