RTL Datatables


Topic: RTL Datatables

ochakov pro premium priority asked 6 months ago

Expected behavior

RTL datatables display like LTR while reversing column order and alignments.

Actual behavior

  1. Scrollbars disappear.
  2. Pagination dropdown icon breaks.
  3. 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.
Scrollbar gone, able to scroll left past the end of the table.

After a refresh, the scrollbar reappears and works as expected. However, the icon for the rows per page dropdown stops displaying correctly.
Dropdown icon broken.

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.
Scrambled pagination text.


Mateusz Trochonowicz staff pro premium priority commented 6 months 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 pro premium priority commented 6 months 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 pro premium priority commented 6 months 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: PC
  • Browser: Chrome. Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes