Records List too wide to fit browser window
7 posts by 3 authors in: Forums > CMS Builder
Last Post: December 11, 2019 (RSS)
Hi All,
When there are more ListPage Fields in a records list then can fit in the normal width of a browser (Firefor/Chrome/Explorer), the information displayed does not shrink to fit the screen and the action links like the modify/erase are off screen and can’t be seen.
Unfortunately, the horizontal scroll bar is at the bottom of the records list.
To access the horizontal scroll bar I have to scroll down to the bottom of the records list (or hit the end key), then I can use the horizontal scroll bar to scroll the right to expose the action links.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> is in the page code but doesn’t seem to work in this situation.
I’ve become used to the situation and manually shrink my screen (CTL - ) until I can see the action links, but I’ve got a few clients that are complaining.
Any thoughts?
Thanks,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By daniel - November 20, 2019
Hi Jerry,
Unfortunately, there aren't a lot of good solutions to this issue, which I think has been discussed here before. The behaviour in question is the standard method of making tables responsive for mobile devices but encountered in a situation where the table is too wide for a desktop screen. Mobile devices can click+drag within the table to expose the cut off columns, but as you noted it's more cumbersome on desktop browsers.
I think that if this is a significant problem, and you aren't able to reduce the number of columns being displayed, then the best option I can think of that doesn't require a significant change to core code would be to disable this functionality on larger screens. This should be possible with only CSS changes and would force the whole table to be visible causing the page to the scroll, moving the horizontal scrollbar to the browser window rather than the table. If you're interested in trying this out, I can point you to the portions of the CSS that would need to be overridden.
Also, in the meantime, I can offer a few other ways to "navigate" the current tables when they are scrolling that don't require manipulating the scrollbar:
- It's possible to click inside the table and use the left and right keyboard arrows to scroll it
- It's also possible (with mice that support it) to click the mousewheel inside the table once and then move the mouse left and right to scroll
Cheers,
Technical Lead
interactivetools.com
Hi Daniel,
Thanks for your thorough and logical response.
I'm one of the folks that has addressed this issue before.
It only comes up for a few clients, but I'd love to explore your CSS approach.
Looking forward to your suggestions.
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By daniel - November 20, 2019
Hi Jerry,
If you add this CSS it should disable the "scrolling tables" and instead have the page scroll:
.horizontal-autoscroll {
display: inline-block;
width: 100%;
overflow: visible;
}
.panel {
display: inline-block;
min-width: 100%;
}A few notes:
- This is a very quick-and-dirty fix that changes a structural class; it should achieve the desired effect, but it hasn't been thoroughly tested
- You'll want to use a media query to make sure this doesn't apply to mobile device-sized screens
- I'd recommend copying your existing CSS theme (cmsb/3rdparty/clipone/css/) and making a new one to add these changes. You could also add them to the current theme CSS, but that becomes difficult to keep track of if the theme is ever updated.
Let me know any questions!
Thanks,
Technical Lead
interactivetools.com
Great, thanks.
When it's done I'll post the complete code for anyone else who might want to venture into the unknown.
Best,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
It might be worth considering moving the action links to the left-hand side.
OR adding a context menu to the row that shows the actions available. You can see an example in this fiddle https://jsfiddle.net/KyleMit/X9tgY/
Thanks for the input, Jeff,
Got kind of bogged down, but I'll figure all this out soon.
Jerry Konbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php