Horizontal scroll on Table Widget

Question

Hello,

I am working with a client's dashboard and trying to get a horizontal scroll bar to appear on a table widget. I have tried this code:

dashboard.on('widgetready', (el, args) => {
    $('.p-mid', 'widget[widgetid=' + args.widget.oid + ']').scroll((scrollBar) => {
        $('.p-mid').each((_,pivot) => {
            pivot.scrollLeft = scrollBar.target.scrollLeft;
        });
    });
});

but to no avail. Does anyone have any solution to this?

Rafael Ferreira · Accepted Answer

Solution is to make sure column with is selected to Manual and not Automatic

Vitalii Veremeiev · Answer

Hi Team,

You can try the script below (needs to be applied at the table widget level) to force the scroll bar to always be visible:

const scrollClasses = [
	'.dataTables_scrollBody'
];

const customStyles = {
	overflow: 'scroll !important'
};


widget.on('domready', () => {
	scrollClasses.forEach((className) => {
		let styles = {};

		$(`${className}`, element).attr('style').split(';').filter(item => item).forEach(item => {
			const [key, value] = item.split(': ');
			styles[key.trim()] = value;
		})

		styles = {...styles, ...customStyles};

		const newStyles = Object.keys(styles).map((style) => `${style}: ${styles[style]}`).join('; ');
		$(`${className}`, element).attr('style', `${newStyles};`);
	})
})

DRay · Answer

Hi Astroraf , Thank you for reaching out. I haven't been able to find any other code for that, so I'm going to reach out internally to try and get an answer.