Page 1 of 1

Horizontal Scroll on Tables

Posted: Fri Dec 29, 2017 9:07 pm
by rgsmiths
Pablo,

This may be something easy for you... but I can not find a working way to
force a horizontal scroll bar onto a Table when window size reduced to less than Table width.
All tries via wrapper div style="overflow:auto;" etc have not worked.
Found several examples in W3shools.com like at
https://www.w3schools.com/howto/howto_c ... onsive.asp
and their examples work but when I create a table
and add the div wrapper it does not work in WYSIWYG published or previewed form...

The page horizontal scroll works but the Table does not have the h scroll bar independent of the page...
Also tried the DBTS List and Data Viewer and got same no h scroll on table...

Could you help?

Roy

Re: Horizontal Scroll on Tables

Posted: Fri Dec 29, 2017 9:09 pm
by Pablo

Re: Horizontal Scroll on Tables

Posted: Sat Dec 30, 2017 1:11 am
by rgsmiths
Thank you Pablo but I have
tried the 3 forms suggested and they do not do what is wanted...
nice options though...
just want simple horizontal scroll on the table so it can be used
without moving the entire page contents when browser window
is like at 320 on a phone... and table is say 500 wide etc...

is this possible?

Re: Horizontal Scroll on Tables

Posted: Sat Dec 30, 2017 8:18 am
by Pablo
I'm sorry there is no standard option for this.
This will require custom code.

Re: Horizontal Scroll on Tables

Posted: Sat Dec 30, 2017 9:36 am
by Bluesman
Maybe you can publish the table in a separate page which you link into a I-frame at the actual page...

Re: Horizontal Scroll on Tables

Posted: Sun Dec 31, 2017 1:12 am
by rgsmiths
Thank you Pablo and Blueman, could not do via your suggestions but have 2 solutions that seem to work...

After playing with several ideas, found this works fairly well for my goals
I am not sure why it works but it does
There are two ways to get results wanted as follows

1
add Table to page with Col and Row quantity as needed
set Cell alignment, font config, etc as desired
add data to the table cells as desired
note the width of the table as a reference
then
add this HTML code to the Table HTML in the Before Tag window
<div style="width: 100%; height:100%; overflow-x: auto; white-space: nowrap;">
add this HTML code to the Table HTML in the After Tag window
</div>

add Layout Grid and set for:
General Tab
Columns single box, Centered
Overflow hidden
Miscellaneous Fluid, 1,1, Floating,
Padding 0, 0
Maximum width Table width wanted to show in middle of Browser as noted when created above
move the Table created above so it is contained inside this Layout Grid

or

2
add FlexBox Container and set for:
General Tab
Flexbox row, nowrap, center, center, center
Miscellaneous undefined, Floating
and Max width to Table width wanted to show in middle of Browser as noted when created above
move the Table created above so it is contained inside this Flexbox Container

this works inside Layout grid and FlexBox Container
with slight differences in results:

Layout grid will adjust Cells/Table Horizontal size
as the Browser Width is reduced
when Browser Width hits Layout Grid Max Width setting
until 1 cell in table needs to wrap, at that point the Horizontal Scroll bar becomes active
and no further Cell/Table size reduction occurs

FlexBox Container does not adjust cells Horizontal size as the Browser Width is reduced
and Horizontal scroll bar becomes active
when Browser Width hits FlexBox Max Width setting

I have made a page that gives an simple example of each of these at this url
<http://www.rgsmiths.com/ths/TableHScroll-1.html>

I will leave this up for a few days and then remove after you have a look and possibly comment.

Pablo, Could something like this be made up into an extension?
or incorporated into your "Responsive Data Table" extension?

I am not skilled to do, but maybe someone on the forum can do?


Thanks for being there,
Roy