Horizontal scrollbar appearing where it doesn't need to

[the-integrator]

Wherever I put the SOQL Datatable it always renders a horizontal scrollbar letting me scroll literally 1px. This is from a record page in my developer edition org:

The scrollbar disappears when I manually reduce one of the columns sizes. Has anyone had this before?

[tsalb]

Oh this is a fun one - are you on windows desktop or laptop by any chance? If so, which?

Unfortunately I don’t have any windows VMs atm. I do recall seeing something like this over a screen share (many moons ago). I might be able to get my hands on a windows machine (or spin a VM) and give this a test at a future date.

Curious to see what others say, and if they’ve patched this themselves. I don’t have bandwidth until mid MAY unfortunately!

[the-integrator]

Yes this is on a laptop running Windows 10. I think I’m going to test this on different regions on a lightning page and see in detail when this comes up. How/where would you start investigating so maybe I can have a look at?

Many thanks!

[tsalb]

Thanks for that confirmation. I am curious to see if this is different on desktop (not asking you to, just an observation).

I have two hunches:

1. This is part of the base component, in which case we are SOL
2. This is part of one of my div containers which i use to add styling, in which case I'd need a patch that doesn't adversely affect combinations of different OS-es and browsers.

For hunch 1, here are my thoughts:

• Created a <lightning-datatable> per the docs, use width mode auto (forgot exact syntax) and use 20 columns. See if scroll bar persists.

For hunch 2:

• See if this container class is affecting only windows (and only windows laptops, probably)

Basically, I am trying to distill if this is me or if this is base component. Any data you can provide me would be awesome!

[JimBTek]

I am seeing the same on Mac running Chrome Version 88.0.4324.192 (Official Build) (x86_64) and Firefox

It goes away if i zoom out to 80% or less.

This is in a 2/3rd split lightning page in the left side which is 2/3rd wide

I see this. the outer div is 963.99 and the inner table is trying to be 967 pixels.

[tsalb]

Investigated this during summer 21.

Looks to be an issue with the column-widths-mode property being set to "auto". Setting back to "fixed" resolves this however produces a worse UX. I will leave it as "auto" and hope they fix this without having any manual intervention on my side.

That being said, I'll investigate workarounds at a future date. Placing appropriate labels for future reference.

[RomanTheCube]

+1 to being impacted by this issue.

Windows 10, Edge browser. Horizontal scrolling bar appears no matter where the component is placed on the page, and not impacted by the number of columns etc.

*Note: Ticking the experimental overflow checkbox does appear to resolve this issue, but not sure what is happening with this