Horizontal scroll on Table Widget

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

Posted 2 years ago·Last reply 1 year ago

3 comments

Vitalii Veremeiev

·1 year ago

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};`);
	})
})

Rafael Ferreira

OP2 years ago

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

DRay

·2 years ago

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.