Records List too wide to fit browser window

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,

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

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,

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

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