Topic: RTL Datatables
Expected behavior
RTL datatables display like LTR while reversing column order and alignments.
Actual behavior
- Scrollbars disappear.
- Pagination dropdown icon breaks.
- Pagination text's order is scrambled.
Resources (screenshots, code snippets etc.)
It is possible to replicate this behavior on the RTL full demo by resizing the window to show horizontal scrolling. Tested using both Chrome and Firefox to find the same results.
On first page load (new tab), the scrollbar will appear on the left side of the table and any horizontal scrolling will make it disappear, while also allowing to scroll to the left infinitely.
After a refresh, the scrollbar reappears and works as expected. However, the icon for the rows per page dropdown stops displaying correctly.
After an additional refresh, those behaviors are returned to expected operation, but the pagination text's order is still scrambled, showing of 10 10 - 1 rather than the expected 1 - 10 of 10.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 5.0.0
- Device: PC
- Browser: Chrome. Firefox
- OS: Windows 11
- Provided sample code: Yes
- Provided link: Yes
Mateusz Trochonowicz staff commented 1 week ago
Hi, 1. This bug with arrow could be a result of not properly loading Font Awesome from CDN. 2. Have you imported RTL CSS file? Instructions are in RTL guide. https://mdbootstrap.com/docs/vue/getting-started/rtl/
Anyway we are going to check this out and try fix it in next release. Thank you for reporting!
ochakov priority commented 1 week ago
Please notice, the problem has been replicated in your demo https://mdbgo.io/marta-szymanska/mdb5-demo-pro-rtl/pro/components/full-demo-pro.html
Mateusz Trochonowicz staff commented 5 days ago
Yes, it is replicated, but demo is not built with Vue version, so there could be differents between them. Althoug, as I said, we are going to check this out.