Sign up |
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.
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?
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?
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,
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.
I also like this approach (toggleView):
Basic Columns/Large Columns
...and Detail View (...):
If you are interested, you can use the extention mobile:
Or for another approach :