WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Responsive theme not displaying correctly on phone

[Resolved] Responsive theme not displaying correctly on phone

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author TobiasBg

    @tobiasbg

    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

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

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

    Plugin Author TobiasBg

    @tobiasbg

    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

    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.

    Plugin Author TobiasBg

    @tobiasbg

    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

    i have some screenshots, but how to attach them?

    Plugin Author TobiasBg

    @tobiasbg

    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

    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.

    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

    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.

    Plugin Author TobiasBg

    @tobiasbg

    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

    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.

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

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] Responsive theme not displaying correctly on phone’ is closed to new replies.