WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Responsive theme not displaying correctly on phone (21 posts)

  1. knireis
    Member
    Posted 1 year ago #

    On my site the table is not displayed correctly on a mobilephone.
    http://www.openhof.com/rooster2

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question, and sorry for the late answer. As I was on vacation, I didn't have a chance to reply earlier.

    You are probable refering to the small shift in the rows. My suggestion here would be to fix the content to stay in one line of text. To do that, please add this to the "Custom CSS" textarea on the "Plugin Options" screen of TablePress:

    .tablepress-id-1 thead th,
    .tablepress-id-1 tbody td {
      white-space: nowrap;
    }

    Regards,
    Tobias

  3. knireis
    Member
    Posted 1 year ago #

    Thanks, that is one issue, but maybe you can have a look again at this link on a mobile phone: http://www.openhof.com/rooster2

    Then you'll see what i meant in the first place.

    It is related to this question:

    http://wordpress.org/support/topic/datatables-javascript-library-breaks-responsivetable-extension?replies=1

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ah, ok. From what I can see, this is not directly caused by the DataTables JS library, but by the "FixedColumns" Extension.
    This just is not compatible with the Responsive Tables Extension. Sorry.
    I think that it would be the best to not use the Responsive Tables Extension on this table, as the FixedColumns Extension serves a similar purpose.

    Regards,
    Tobias

  5. knireis
    Member
    Posted 12 months ago #

    Ok thanks, now i removed the responsive extension and added the code as above but there is still a shift.

  6. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    hhm, weird... I don't see a shift when I try... Do you see that in your regular browser, when you reduce the browser window width?

    Regards,
    Tobias

  7. knireis
    Member
    Posted 12 months ago #

    Yes, when i reduce the browser window width, the columns are shifted from the header in the top row.
    And not all headers are displayed correctly.

  8. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    hhm, this does not happen for me, neither in Google Chrome nor Firefox on Linux, and not in Firefox and IE8 on Windows.
    Can you maybe try on a different computer as well?

    And can you post a screenshot so that I can see the problem there?

    Regards,
    Tobias

  9. knireis
    Member
    Posted 12 months ago #

    i have some screenshots, but how to attach them?

  10. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    you could upload them to some service like http://imgur.com/ and post the links here.
    But more important: What happens on other browsers for you?

    Regards,
    Tobias

  11. knireis
    Member
    Posted 12 months ago #

    Well, the phone is android 4.0.3 with latest firefox.
    On my pc i use linux mint debian and with both firefox and chromium i see the same result.

  12. knireis
    Member
    Posted 12 months ago #

    here are some screenshots:

    1: normal on a pc monitor, looks good
    2: small window on pc monitor
    3: phone: you see that the second column (the first after the fixed column) is not displayed correctly
    4: other columns don't line up correctly

    https://jasper.tonidoid.com/urlnumdlr

  13. knireis
    Member
    Posted 12 months ago #

    I included now also a screenmovie, here you can see what happens when i continuously decrease the width of the screen.
    You see that some items in the top row don't move while the corresponding columns are moving. And also that for some columns the column moves faster than the item in the corresponding top row.

  14. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    thanks for the screenshots and the movie! Now I know what you mean! :-)
    And I can experience that on my computer as well. I guess, I had been missing that because I was looking for problems in the vertical direction and not in the horizontal direction...

    Now, unfortunately, I don't really know a solution to this :-( This happens because the FixedColumns Extension adds the header row a second time, right above the original one. However, as that duplicate is not "connected" to the rest of the table, the cells don't line up. :-(
    The only real solution is therefore to set fixed column widths for all columns, as described in the TablePress FAQ at http://tablepress.org/faq/
    Another idea would be to not use the FixedColumns Extension, but to try the Responsive Tables Extension again (but not both of them at the same time, as mentioned in my second reply in this thread).

    Regards,
    Tobias

  15. knireis
    Member
    Posted 12 months ago #

    The fixed column width for each column does not solve it.
    I need the fixedcolumnextension for the big screen because i have too many column to fit on a page and the first column is a date, which is important to see when scrolling to the end of the columns.

  16. knireis
    Member
    Posted 12 months ago #

    another thought, can i change the fontsize of the header row?

  17. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    are you sure that a fixed column width, with something like

    .tablepress-id-123 .column-1 {
      width: 150px !important;
    }

    does not help (for all columns and with that !important keyword).
    From what I know, the JS otherwise calculates its own widths for the columns and that's what causes the mismatch.

    Changing the font size is also possible with some CSS code, but that's not really going to help.

    .tablepress-id-123 thead th {
      font-size: 10px;
    }

    Regards,
    Tobias

  18. knireis
    Member
    Posted 12 months ago #

    making fixed width does not help any, the header row continues to behave different from the others

  19. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    ah, that's unfortunate :-( Unfortunately, I don't really have further ideas on what to try then. I'm really sorry :-(

    Regards,
    Tobias

  20. knireis
    Member
    Posted 12 months ago #

    ok, well thanks for the help

  21. TobiasBg
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    no problem. Sorry that I could not help with a solution here :-(

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.