0

To show a list of completions, I need an absolutely positioned element to take the width of its content, and scroll vertically when necessary. The problem is that the way CSS computes the width of an absolutely positioned element seems to not leave space for the scrollbar, causing the last characters of the widest completion to be hidden below the scrollbar (on platforms where scrollbars take up space).

(Edit: It was pointed out to me that this works by default in Chrome now, though Firefox and Safari still have the issue. It may not be a problem with standard CSS, but with implementations.)

The styles look like this, with a sequence of completion elements inside the completion-list:

  .completion-list {
    overflow: hidden auto;
    max-height: 5em;
    position: absolute;
  }
  .completion {
    white-space: nowrap;
  }

You can see it in action in this codesandbox.

Adding a padding to make space for the scrollbar isn't a great solution, because it'll also show up when there is no scrollbar (and scrollbar width is platform-dependent). I'd really prefer not to use JavaScript to dynamically measure the bar width and kludge in the space.

Marijn
  • 8,691
  • 2
  • 34
  • 37
  • 1
    Hi! Big fan of your work! A suggestion for you: Rather than an off-site link, you can make your example runnable using Stack Snippets (the `[<>]` toolbar button); [here's how to do one](https://meta.stackoverflow.com/questions/358992/). The problem with off-site links is that people shouldn't have to go off-site to help you; some sites are blocked for some users; and links rot, making the question and its answers useless to people in the future. – T.J. Crowder Nov 17 '21 at 10:13
  • It's only an issue with Firefox, isn't it? your Codesandbox seems OK on Chrome – keul Nov 17 '21 at 11:06
  • 1
    Not a fix for your issue now, but maybe in future. You can use `scrollbar-gutter: stable;` to automatically reserve space for scrollbars (see https://ishadeed.com/article/custom-scrollbars-css/#scrollbar-gutter). It's much better than manual padding! Unluckily it's only supported by Chrome for now – keul Nov 17 '21 at 11:11
  • Indeed, it does seem to work just fine like that in recent Chrome versions. Haven't tested Safari yet, but Ephiphany (also webkit-based) does seem to have the issue. – Marijn Nov 17 '21 at 11:16

1 Answers1

0

Tested Safari, Chrome and Firefox on MacOS. The scrollbar takes up zero space. It overlaps the text when scrolling, but disappears when you stop scrolling. I have no problems at all with this user experience.

enter image description here

Brett Donald
  • 6,745
  • 4
  • 23
  • 51