Support » Plugin: TablePress » Table direction

  • Resolved sooren

    (@sooren)


    Hello!

    I’m using TablePress in a multilingual website. I have an English table that it is shown perfectly in English version of the website. But when I try to use it in the Persian language version, it automatically changes the table direction from ltr to rtl. (Because Persian language default setting is rtl). In this way all columns ordering changes and the table contents are shown like a real mess.

    How can I manually set the direction of a table?

    • This topic was modified 5 years, 9 months ago by sooren.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    This is possible using CSS code. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter sooren

    (@sooren)

    Dear Tobias,

    Actually I found the solution. I added this to the plugin option section:

    .tablepress-id-2 {
    direction: ltr !important;
    }

    and then I added this to the custom css under the post:

    .tablepress-id-2 td,
    .tablepress-id-2 th {
    text-align: left;
    }

    Now it works fine but still with some issues which you can see in the link below:

    http://faranama.co/category/%d8%af%d8%a7%d9%86%d8%b4%d9%86%d8%a7%d9%85%d9%87/%d8%aa%d9%82%d9%88%db%8c%d9%85-%d9%86%d9%85%d8%a7%db%8c%d8%b4%da%af%d8%a7%d9%87%db%8c/

    When I switch to English table, the horizontal scrolling doesn’t work in the table anymore and the WEBSITE column shows the urls incomplete. (however I have used (responsive=scroll) in the table option.

    And both table use fixheader option which works well in Persian table but when you switch to English table and move down, then it still shows Persian header !!!

    Is there any solution for fixing these issues !?

    • This reply was modified 5 years, 9 months ago by sooren.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    I’m not sure what’s wrong here. I don’t even see the table when going to the English site?

    Regards,
    Tobias

    Thread Starter sooren

    (@sooren)

    Hi,

    Sorry I needed to explain better. You don’t have to change the language of the website. when you open the link, you see the table and above it there is a vertical menu which I have made by “Su tabs”. If you click on the second button it changes the table and shows the English one. and there is the place that you can see the issues which I mentioned in my last message.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    ah, now I see what you mean πŸ™‚

    I’m afraid that this is all caused by the table being displayed in a tab. Due to how tabs work (they hide all tabs except for one initially), the DataTables JS library can not make certain calculations, like for the column widths. This becomes more visible when the table content requires larger widths than what’s available.
    Also, the scroll mode will not really work in conjunction with the FixedHeader, I’m afraid πŸ™

    The only real thing that we can fix here is the language for the JS features, by changing the used Shortcode to
    [table id=2 datatables_locale="en_US" /]
    For the other issues there’s nothing really that we can do as long as the table is in a tab. πŸ™

    Regards,
    Tobias

    Thread Starter sooren

    (@sooren)

    Hi,

    Thanks for taking your time for looking at it again. I appreciate your clear explanation. You’re right it must be the conflict between Tabs and Tables. It’s a pity that I have to give up on using FixedHeader and Scrolling features now πŸ™

    Best regards,
    Ali

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Ali,

    yeah, compatibility with tabs would be nice, and hopefully it can be added to the DataTables JS library soon. I’m also looking forward to it.

    Best wishes,
    Tobias

    Thread Starter sooren

    (@sooren)

    Hi Tobias,

    Just for the record I noticed right now that the problem with scrolling bar is not about using Tabs. It happens to not work in the languages which are from right to left. (same as Persian or Arabic)

    Kindly look at the links below. they are just a same table with same options and features which first and second one are English and Spanish Language and scrolling works fine in them and the third one is in Arabic that scrolling not work in it.

    Point: (in these three links I haven’t use any Tabs as you can see)

    http://faranama.co/en/category/knowledge/fairs-calendar/

    http://faranama.co/es/category/conocimiento/calendario-de-ferias/

    http://faranama.co/ar/category/%d9%82%d8%a7%d9%85%d9%88%d8%b3-%d8%a7%d9%84%d9%84%d8%ba%d9%87/%d8%aa%d9%82%d9%88%d9%8a%d9%85-%d8%a7%d9%84%d9%85%d8%b9%d8%a7%d8%b1%d8%b6/

    The Table format:

    [table id=2 datatables_locale=”en_US column_widths=”150px|70px|90px|200px|62px|60px|110px” automatic_url_conversion=true automatic_url_conversion_new_window=true responsive=scroll datatables_fixedheader=top /]

    Whatever it is, It’s about the language.

    Best,
    Ali

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    all this might be related to the table-layout: fixed; CSS command that you apply to .tablepress-id-2. I can only assume that that works differently with RTL tables.
    Can you maybe try again after removing that?

    Regards,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Table direction’ is closed to new replies.