Forum Discussion

Astroraf's avatar
Astroraf
Data Pipeline
06-21-2024
Solved

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?

Dashboards & Reporting
  • Astroraf's avatar
    Astroraf
    06-25-2024

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

3 Replies

  • DRay's avatar
    DRay
    Admin
    06-21-2024

    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.

     

  • Astroraf's avatar
    Astroraf
    Data Pipeline
    06-25-2024

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

  • Vitalii's avatar
    Vitalii
    Data Storage
    04-22-2025

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