`inline-block` scroll content hack causing issues with `relative` positioned content

[hakimio]

Reproduction

Reproduction project attached to this issue. ngx-scrollbar-swiper.zip

Steps to reproduce:

1. Place swiperjs <swiper> element inside <ng-scrollbar>

Expected Behavior

Swiper content would look the same like when placed inside a overflow: auto block element.

Actual Behavior

ng-scrollbar causes swiper slides to be a lot wider than they are supposed to be.

Additional Info

Changing ng-scroll-content display from inline-block to block fixes the issue.

Environment

• Angular: 16.1.5
• ngx-scrollbar: 13.0.2
• Browser(s): Chrome 114
• Operating System: Windows 10

[MurhafSousli]

Please use the stackblitz for reproduction!

[hakimio]

Here is CodeSandbox reproduction: https://codesandbox.io/p/sandbox/unruffled-cache-8grp6q?file=%2Fsrc%2Fapp%2Fapp.component.scss%3A19%2C4

[MurhafSousli]

As I remember the inline-block was necessary to make horizontal scroll work properly. with display block it would force fitting parent width.

Your fix should stay at the project level

[hakimio]

• horizontal scrollbar works fine even when scroll content is using display: block. The margin/padding issue is a problem with the example number 5 itself, not the library. The example should be fixed instead of applying a hack to the library to fix the example.
• Most people are using default option: track: vertical and correct vertical behavior should be prioritized. If, for some reason, you still want to keep the inline-block hack, you could only apply it when track is set to horizontal or all, not vertical.

EDIT: here is a fix for the example number 5 padding issue:

code {
    display: block;
    padding: 0 10px;
    width: fit-content;
}

Patch: Remove_inline-block_hack.patch

[MurhafSousli]

@hakimio If width: fit-content was applied on ng-scroll-content element instead of display: inline-block, would it also cause the same issue? could you try it?

[hakimio]

Yes, it causes the same issue. Anyway, what kind of issue exactly are you trying to address with those kind of workarounds/hacks?

[MurhafSousli]

Yes, it causes the same issue. Anyway, what kind of issue exactly are you trying to address with those kind of workarounds/hacks?

The content layer is observed for size change using the ResizerObserver if it didn't fit the width of its content, the scrollbar won't be notified to update

[MurhafSousli]

@hakimio I will tackle this by adding width: fit-content only when the viewport is horizontally scrollable

[hakimio]

Sounds good. Thank you.

[MurhafSousli]

@hakimio Could you try if it works fine with the slider if you remove width: fit-content and set position: absolute on the .ng-scroll-content ?

[hakimio]

No, but you can just test it yourself as well. I have provided CodeSandbox reproduction above.

[MurhafSousli]

No, but you can just test it yourself as well. I have provided CodeSandbox reproduction above.

Oh, forgot about that, lol

[MurhafSousli]

Fixed in v14