scrollX for varying viewports?

nat5142

Hi, all.

I've just implemented scrollX to handle a wide table for mobile viewports, but while setting "scrollX": true, handles my table on mobile viewports, it causes the table to only span a fraction of the width of larger (desktop) viewports. This isn't necessary, because placing my table in a Bootstrap 4 <div class="container-fluid"> causes the element to be sufficiently wide on my laptop viewport.

Here are some images to show you what's going on:

The ideal format of the webpage on a standard desktop viewport, with "scrollX": false.

A mobile viewport, with "scrollX": true, which works properly.

A desktop viewport, with "scrollX": true -- I would like the table to span the same width as shown in the first hyperlinked image, but it's formatted this way instead.

Is there a way that I can handle this in the DataTables options section of my jQuery code (i.e. if/else statement)?

Thanks to all in advance for the help.

kthorngren

If I understand what you want to do correctly - you could just use a "var" before the Datatables initialization that is "true" on mobile or "false" on non-mobile devices. Then use something like scrollX": doWeScroll, where "doWeScroll" is your boolean value.

Kevin

nat5142

@kthorngren ah, clever! I'll give that a shot. Sorry about the elementary question clogging up the message boards (still new to JS!)

Thanks for the help.

kthorngren

Sorry about the elementary question clogging up the message boards (still new to JS!)

No problem, we all started new at some point

Kevin