Big problems with with horizontal scrolling and responsive

Resolved FiveMinuteRecipes.de
(@smartwatchbosscom)

9 years, 10 months ago

Hey Tobias!

Look at this page I made to showcase the issues: http://smartwatchboss.com/table1/

In Chrome the horizontal scrolling isn’t working and the responsive table is cropped into two rows.

In Firefox the horizontal scrolling is working, but the responsive table is also cropped.
One question about the horizontal scrolling table: Like I see in Firefox the width of the columns are fitted to the longest word in it, right? Can it be changed, so that its fitted to the whole content? Or do I have to set every column-width manually?

Haven’t tested IE yet.

Thank you for your time!

Regards,
Paul
(man muss hier auf Englisch schreiben, richtig?)

https://wordpress.org/plugins/tablepress/

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

Plugin Author TobiasBg
(@tobiasbg)

9 years, 10 months ago
Hi Paul,

thanks for your post, and sorry for the trouble.

(For your last question: Yes, as these are the English language forums, English is preferred, so that more people can benefit from the discussion.)

I can confirm that the Horizontal Scrolling is not working here, but I don’t really see why. For some reason the table is switching to the “fixed” layout mode, so that all columns are very narrow with word-wrapping happening inside of words.
Instead of using the “Horizontal Scrolling” checkbox, I’d therefore suggest to switch to a different type of horizontal scrolling:
For that, please uncheck the “Horizontal Scrolling” checkbox and add this “Custom CSS” (on the “Plugin Options” screen) instead:
```
#tablepress-1_wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}
```
For the Responsive Tables Extension: As that’s incompatible with the “Horizontal Scrolling”, I suggest to try that again after turning off “Horizontal Scrolling” as well (so that the header row will not be separate from the table body anymore).
It will then still show the text in one line though, which you can however change by adding this “Custom CSS”:
```
.tablepress-id-1 tbody {
  white-space: normal !important;
}
```
For a better layout, you might then however have to manually set the row heights (not the column widths), due to how the table scrolling works technically. (It’s not really that nice for tables where the text is in multiple lines, which is why the default is to put everything in one line.)

So, in summary, for this table, the best approach might be to use the first suggestion from above, with the alternative horizontal scrolling method. That will also work in responsive mode, so that you don’t actually have to use the Responsive Tables Extension.

Regards,
Tobias
Thread Starter FiveMinuteRecipes.de
(@smartwatchbosscom)

9 years, 10 months ago

Hey Tobias,

I’ve unchecked the “Horizontal Scrolling” checkbox and added the custom CSS, but scrolling still doesn’t work in chrome.

Any idea?

Thank you.

Regards,
Paul
Plugin Author TobiasBg
(@tobiasbg)

9 years, 10 months ago
Hi Paul,

ah, found it. We’ll need another piece of CSS code. Please also add
```
.tablepress {
  word-break: normal;
}
```
Regards,
Tobias
Thread Starter FiveMinuteRecipes.de
(@smartwatchbosscom)

9 years, 10 months ago

Hey Tobias,

thanks for your help. Seems to work fine now! 🙂

Can you tell me how I can remove the “back/forward”-text (screenshot: https://dl.dropboxusercontent.com/u/41089257/Unbenannt.PNG )?

It would be great, if these buttons are only visible when there is actually more than one page.

Regards,

Paul

Plugin Author TobiasBg
(@tobiasbg)

9 years, 10 months ago

Hi Paul,

good to hear that this worked! To remove “Back/Forward”, just uncheck the “Pagination” checkbox on the “Edit” screen of the table.

Regards,
Tobias

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

The topic ‘Big problems with with horizontal scrolling and responsive’ is closed to new replies.

Tags