Records List too wide to fit browser window

7 posts by 3 authors in: Forums > CMS Builder
Last Post: December 11, 2019   (RSS)

By gkornbluth - November 19, 2019

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

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 gkornbluth - November 20, 2019

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

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 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,

Daniel
Technical Lead
interactivetools.com

By gkornbluth - November 20, 2019

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

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 kitsguru - December 10, 2019

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/

Jeff Shields

By gkornbluth - December 11, 2019

Thanks for the input, Jeff,

Got kind of bogged down, but I'll figure all this out soon.

Jerry Konbluth

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