make record list width always fit the browser window

9 posts by 4 authors in: Forums > CMS Builder
Last Post: December 23, 2017   (RSS)

By gkornbluth - December 17, 2017 - edited: December 17, 2017

Hi All,

It's a rather small issue, which I brought up back in Feb 2015 when you were working on the first responsive UI, but part of the solution seems to have slipped under the radar.

Is there a way to set the width of a record list (including the displayed data) so that it always fits the width of the browser window?

It seems that the list page field labels themselves always fit, but when there is data  displayed for those fields, the data can easily push the page width past where a scroll bar is required.

I'm using Firefox (PC), and have always found (up to 3.10) that if I have a number of ListPage fields that display data as columns in a record list, I have to scroll to the modify/erase for each record. Same in IE, Safari and Chrome.

Example images are attached.

Thanks,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Attachments:

nodata.jpg 77K

withdata.jpg 93K

By Dave - December 19, 2017

Hi Jerry, 

That's an interesting issue.  What would you like it to do instead?  Have the content wrap inside the column cell and make it taller?  

Dave Edis - Senior Developer
interactivetools.com

I think the scrolling table is the only way to go, as everyone has different requirements here and the standard bootstrap answer is to do this.

We could start wrapping content, or adding additional variables to each column - but it would get messy very quickly.

Maybe at certain breakpoints we could have the action column display as the first column?  Simply have the first column with .visible-xs so it's easier to action? 

Cheers,

Tim (toledoh.com.au)

Not sure what the best solution would be Dave, but it does seem as if the type gets smaller to accommodate the labels, just not the data.. I'd be happy with the type getting smaller for the data as well, so that it always fits the screen it's displayed on. Especially since you can always make the type bigger with <Ctrl>/<cmd> +.

I've had a number of not so savvy sub administrators complaining that the 'modify' command didn't exist for them even though it was only a scroll away.

I (obviously wrongly) thought that the viewport command took care of fitting existing content to a screen.

Maybe some more visible indicator that there was more data to the right, maybe putting the operators, like modify and save, etc, on the left side of the screen.

Just a few thoughts,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By Dave - December 22, 2017

Hi Guys, 

Check out these 3 options: https://elvery.net/demo/responsive-tables/

I'm liking the "No More Tables" approach for small screens.  Or many something that hides extra columns when the table is too narrow and then has a "+" or "more >>" link that shows the extra fields on mouseover.

Thoughts? 

Dave Edis - Senior Developer
interactivetools.com

By Djulia - December 23, 2017 - edited: December 24, 2017

Hi Jery,

If you are interested, you can use the extention mobile:
http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/mobile.html

Or for another approach :
http://gergeo.se/RWD-Table-Patterns/#demo

https://github.com/filamentgroup/tablesaw/

Djulia

By gkornbluth - December 23, 2017 - edited: December 23, 2017

Interesting.

Thanks Djulia.

Best for the season.

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php