Horizontal Scroll on Tables

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
rgsmiths
 
 
Posts: 30
Joined: Thu Mar 16, 2017 12:47 am
Contact:

Horizontal Scroll on Tables

Post by rgsmiths » Fri Dec 29, 2017 9:07 pm

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

User avatar
Pablo
 
Posts: 20642
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Horizontal Scroll on Tables

Post by Pablo » Fri Dec 29, 2017 9:09 pm


rgsmiths
 
 
Posts: 30
Joined: Thu Mar 16, 2017 12:47 am
Contact:

Re: Horizontal Scroll on Tables

Post by rgsmiths » Sat Dec 30, 2017 1:11 am

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?

User avatar
Pablo
 
Posts: 20642
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Horizontal Scroll on Tables

Post by Pablo » Sat Dec 30, 2017 8:18 am

I'm sorry there is no standard option for this.
This will require custom code.

User avatar
Bluesman
 
 
Posts: 440
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Re: Horizontal Scroll on Tables

Post by Bluesman » Sat Dec 30, 2017 9:36 am

Maybe you can publish the table in a separate page which you link into a I-frame at the actual page...
"Make My Day"

See my Website

rgsmiths
 
 
Posts: 30
Joined: Thu Mar 16, 2017 12:47 am
Contact:

Re: Horizontal Scroll on Tables

Post by rgsmiths » Sun Dec 31, 2017 1:12 am

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

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests