1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: RTL Datatables

ochakov priority asked 5 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 commented 5 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 priority commented 5 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 commented 4 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Opened

Specification of the issue
  • 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
Tags
rtl datatables mdbdatatable datatable mdb-datatables mdbpro pro
About author
ochakov
0Support score
2Questions 0Answers 2Snippets