Add an expandSizingTargetForScrollbars property that loosens the width / height constraints if scrollbars appear after the element is positioned.#104
Conversation
…ent, rather than `verticalAlign`.
…ly use the real change in size to adjust position for non-top/left alignments.
`offsetWidth` provides the distance between the outer left border edge to the outer right border edge. `clientWidth` provides the distance between the outer left padding edge and the outer right padding edge - the same as `offsetWidth`, but excluding borders and scrollbars.[^1] The difference between `offsetWidth` and `clientWidth` includes the size of the scrollbars contributing to (or consuming) the width. To measure if a scrollbar was added between two different layout states, we measure the difference between (`offsetWidth` - `clientWidth`) in each of the two states. If the border width is constant, then the difference between these two measurements is the difference between the scrollbar sizes at these two states. This can only detect a change in scrollbar size: it can't distinguish between the case where a scrollbar exists during both measurements and the case where a scrollbar does not exist during both measurements. [^1]: This MDN page has some nice diagrams showing exactly what contributes to each of `offsetWidth` and `clientWidth`: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
bicknellr
changed the title
expandSizingTargetForScrollbars property that loosens the width / height constraints if scrollbars appear after the element is positioned.
…positioned near the bottom of the screen.
…is positioned near the top of the screen.
… positioned near the right of the screen.
…s positioned near the left of the screen.
…rollbar state doesn't depend on the window size.
| }; | ||
| })(); | ||
|
|
||
| const scrollbarSize = (() => { |
There was a problem hiding this comment.
This probably wouldn't work in all cases since css can change scrollbar width and the scrollbar can be different on the body compared to the dropdown
There was a problem hiding this comment.
Yeah, that's true. Fortunately, this is only used when the browser has the vertical scrollbar + max-width bug mentioned above and IE 11 doesn't support modifying the scrollbar size (AFAICT), so I think it's ok to cache this value. However, I combined scrollbarSize and hasVerticalScrollbarMaxWidthBug so that nobody later might come along and try to use scrollbarSize in some other case where they might really need to read it live.
|
The 're-request review' button isn't doing anything (maybe a GitHub org membership thing?) so I'll just ping you in the top level comments like this I guess. Anyways, PTAL @helenxywu |
| // Unlike other browsers, IE11 doesn't support changing the size of scrollbars | ||
| // with CSS, so we don't need to read this value live from the element in | ||
| // question when trying to work around the bug. | ||
| const getVerticalScrollbarMaxWidthBugOffset = (() => { |
There was a problem hiding this comment.
Why the IIFE? Since this is a module, offset can be a top-level sibling declaration to getVerticalScrollbarMaxWidthBugOffset
There was a problem hiding this comment.
Yeah, not strictly necessary, I removed it.
bicknellr
force-pushed
the
measure-with-scrollbars
branch
from
9887409 to
96eb1e6
Compare
3 participants
When iron-fit-behavior takes the initial measurement of the element it intends to position, the element is positioned at
position: fixed; top: 0; left: 0;and may haveoverflow: hidden;applied by (e.g.) iron-dropdown. Both of these situations can cause the element not to have overflowing content when this measurement is taken, even if the element would have overflowing content after it is positioned. If the element does have overflowing content after being positioned and having its max-width / max-height constrained, the size of the added scrollbars take space from the measured natural size of the content and can force the content to wrap awkwardly, even when there is enough space such that this wouldn't be necessary.This PR works around this issue (in basically the same way as #82) by measuring again after the initial positioning: if a scrollbar appears, it adjusts the position and max-width / max-height to account for this (continuing to respect the
fitIntobounds and alignment).This feature is gated behind the
expandSizingTargetForScrollbarsproperty, since expanding the max-width / max-height to account for scrollbars isn't always desirable - for example, if the element being sized is intentionally set to a particular size to align with another element.Fixes #81.