Horizontal overflow, horizontal table lines

  • Resolved cymindis

    (@cymindis)


    8 years, 2 months ago

    Hi Tobias,

    the tables are working pretty fine. There are only some last minute changes needed:

    1) I use following code because my tables are quite large which causes problems on smaller screens:
    .dataTables_wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    }

    With that code I get a horizontal scrolling bar without any function on my desktop screen.

    I would like to make it invisible with following code, but then the first code doesn’t worl anymore.
    body .dataTables_wrapper {
    overflow: hidden;
    }

    Can you help me solve this problem?

    2) The fixed header doesn’t work properly on small mobile screens when it comes to swipe to the sides. Is this a theme or tablepress problem?

    3) All my tables show a few lines between rows that appear thicker than all the other row lines. To look at it I would like to send you the url via pn, is that possible? The page is not officially online yet.

    4) I use fixed background and that works fine on desktop but not on mobile devices. There the background ends when I scroll down the (large) table. Theme or tablepress problem?

    Thanks again for your time, Gaby

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

    (@tobiasbg)

    Hi Gaby,

    thanks for your question, and sorry for the trouble.

    1) Your second piece of CSS overrides this, so that you’d have to limit it to desktop computers, maybe, by using a CSS3 Media Query. You could also take a look at the TablePress Extension from https://tablepress.org/extensions/responsive-tables/. It’s scroll mode basically does the same, but adds another container, which might not suffer from this.

    2) This is a problem with the FixedHeader JS code. It’s not really suited for small screens, I’m afraid.

    3) This is probably also a CSS thing. If you can’t find the cause e.g. with the browser developer tools, please email me the URL.

    4) TablePress does nothing with backgrounds, so this sounds like a theme issue.

    Regards,
    Tobias

    Thread Starter cymindis

    (@cymindis)

    Hi Tobias,

    sorry for my late reply.
    1) Hm, I’m a real beginner that’s why CSS3 Media Query sounds very chinese to me. Isn’t there maybe a (not very elegant) solution like changing the colour of the scrolling bar to transparent?
    2) Then I have to live with it ??
    3) I’ll try my best.
    4) Then I’ll aks the theme developers.

    Thanks a lot so long. Have a nice week-end, Gaby

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    1) Not that I’m aware of ?? Scroll bars are still elements on web pages that are more controlled by the browser and not the page itself. Now, there are browser-dependent possibilities, using special CSS, but I haven’t played with that yet.

    Best wishes,
    Tobias

    Thread Starter cymindis

    (@cymindis)

    Hi Tobias,

    a friend of mine replaced

    .dataTables_wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    }

    with

    .dataTables_wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    }

    and now it works! No Media Query necessary.

    4) seems to be a Safari issue.

    Regards, Gaby

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Gaby,

    ah, nice find! Yes, that seems to solve it! (The idea with using the Extension should also work, as it also uses auto.)

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Horizontal overflow, horizontal table lines’ is closed to new replies.