Closed boomler closed 1 year ago
@boomler Good day! :)
Thanks for the report - The temporary fix would be to apply min-width: 0
to the .os-viewport
element (https://codesandbox.io/s/crazy-sky-85wk3d?file=/src/styles.css). I'll take a look if I can add this fix to the next release without it breaking anything. I hope this solves your problem for now
@KingSora thanks for your quick reply!
And I am wondering why we need additional viewport
element?
@boomler Good day! :)
Thanks for the report - The temporary fix would be to apply
min-width: 0
to the.os-viewport
element (https://codesandbox.io/s/crazy-sky-85wk3d?file=/src/styles.css). I'll take a look if I can add this fix to the next release without it breaking anything. I hope this solves your problem for now
@KingSora The key point is that you use width: calc(100% + 30px)
and padding: 15px
at the same time but use box-sizing: inherit (content-box)
. When the box-sizing
is content-box
, the viewport element is always larger than the container by 30px. I think it is not a good idea to use min-width: 0
. Do you consider using box-sizing: border-box
instead?
By the way, I find that margin: -15px
doesn't work either.
And I am wondering why we need additional viewport element?
@boomler The viewport
element is there for several reasons... here are a few:
There are probably more, but I would say that are the most important ones.
I think it is not a good idea to use
min-width: 0
.
@gavinxgu Thanks for the input! :) Could you elaborate why you think min-width: 0
is not a good idea?
Do you consider using
box-sizing: border-box
instead?
@gavinxgu The problem here is that I don't really want to augment the box-sizing
property so the user can decide what to use without really caring too much about it. Since the content is placed inside the viewport
and box-sizing
is a property which can be inherited it would potentially change the box-sizing
values for all the content items you place inside the viewport.
The key point is that you use
width: calc(100% + 30px)
andpadding: 15px
at the same time but usebox-sizing: inherit (content-box)
. When thebox-sizing
iscontent-box
, the viewport element is always larger than the container by 30px. By the way, I find thatmargin: -15px
doesn't work either.
The content is not always larger by 30px
if the box-sizing
is content-box
. Just remove the white-space: nowrap
rule and the content would fit perfectly.
Please don't forget that you are looking at one usecase of many possible ones. Some of the calculations may seem pointless in that usecase but are key in a different one. In fact there are so many that I've an extensive suite of end to end tests which run about 10mins to verify the functionality of the plugin for the most common ones. (this would be a new case to add to those tests).
@boomler I've published overlayscrollbars
v2.2.1
which includes this enhancement. Here is the full changelog: https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#221
In case you (or @gavinxgu) have further questions please don't hesitate to ask (or to create a new issue / discussion)
Describe the bug
viewport element's width may bigger than scroll target
To Reproduce open sandbox: https://codesandbox.io/s/mystifying-sunset-37zn3p?file=/src/App.js
Expected behavior
expect
.os-viewport
's width to be 230 expect text's ellipsis to be fully displayed.What happened
.os-viewport
's width is 260