Horizontal scrolling enabled but not working

  • Resolved creativepassion

    (@creativepassion)


    1 year ago

    Words start truncating, and columns on Table 2 of this page become too narrow when device is <2000px wide.

    Horizontal scrolling is enabled, but it never seems to get triggered.

    And if I also add width (with or without horizontal scrolling enabled), it doesn’t help:

    .tablepress-id-24 .column-1, .tablepress-id-24 .column-2, .tablepress-id-24 .column-3, .tablepress-id-24 .column-4, .tablepress-id-24 .column-5, {width: 85px !important;}

    And if I also add min-width (with or without horizontal scrolling enabled), it doesn’t help:

    .tablepress-id-24 .column-1, .tablepress-id-24 .column-2, .tablepress-id-24 .column-3, .tablepress-id-24 .column-4, .tablepress-id-24 .column-5, {min-width: 85px !important;}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter creativepassion

    (@creativepassion)

    1 year ago

    PS Thanks for the awesome free plugin.

    Latest: WP 6.8.1, Tablepress 3.1.2

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    1 year ago

    Hi!

    Thanks for your post and sorry for the trouble!

    The main cause for this is that your theme instructs the browser to add word-wrapping to many HTML elements. To reset that, please add this to the “Custom CSS” text area on the “Plugin Options” screen of TablePress:

    .tablepress div,
    .tablepress span {
        word-break: normal;
    }

    As for the width settings: There must not be a comma before the { in the CSS, i.e. please try this:

    .tablepress-id-24 .column-1,
    .tablepress-id-24 .column-2,
    .tablepress-id-24 .column-3,
    .tablepress-id-24 .column-4,
    .tablepress-id-24 .column-5 {
      width: 85px !important;
    }

    Best wishes,
    Tobias

    Thread Starter creativepassion

    (@creativepassion)

    1 year ago

    Thanks for the awesome fast (& free) support!

    This worked on all columns, EXCEPT the first one (words were still truncating down to one letter).

    .tablepress span {
    	word-break: normal;
    }

    .tablepress-id-24 .column-1 {
    	width: 130px !important;
    }

    .tablepress-id-24 .column-2,
    .tablepress-id-24 .column-3,
    .tablepress-id-24 .column-4,
    .tablepress-id-24 .column-5,
    .tablepress-id-24 .column-6,
    .tablepress-id-24 .column-7,
    .tablepress-id-24 .column-8 {
    	width: 85px !important;
    }

    But, as soon as I changed width to min-width, it worked!

    .tablepress span {
    	word-break: normal;
    }

    .tablepress-id-24 .column-1 {
    	min-width: 130px !important;
    }

    .tablepress-id-24 .column-2,
    .tablepress-id-24 .column-3,
    .tablepress-id-24 .column-4,
    .tablepress-id-24 .column-5,
    .tablepress-id-24 .column-6,
    .tablepress-id-24 .column-7,
    .tablepress-id-24 .column-8 {
    	min-width: 85px !important;
    }

    Love your work!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    1 year ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Besides the min-width idea, it should also work to change the first piece of CSS code to

    .tablepress div,
    .tablepress span,
    .tablepress th,
    .tablepress td {
        word-break: normal;
    }

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Horizontal scrolling enabled but not working’ is closed to new replies.