Data Label Overlay shows over Vertical Scroll Bar
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13k
- Forks
- 1.4k
- Avg merge
- 15h 36m
- Merged PRs (30d)
- 3
Description
Information:
- Prism version: PrismJS 1.17.1
- Plugins: toolbar+show-language
- Environment: Browser
Does the latest version of Prism from the download page also have this issue?
Yes, demonstrated on Show Language using Firefox 71.0 64bit.
Description
When using a data label (such as the one generated using the Show Language Plugin), and there is a Vertical Scroll bar, the hover language overlay appears over the vertical scrollbar. This actually makes the name of the language difficult to read.
When there is no scroll bar it can be read fine:

But as soon as there is one, seeing the language is far harder:

Example
Show Language demonstrates this.
You can also see this below using the Select Code data label and the Show Language option:

http://wp.larnu.uk/a-cursor-free-version-of-sp_msforeachdb/
Expected behaviour
I would expect the overlay to move slightly to the left when there is a scroll bar, or perhaps there could be a (class) option to denote the site the overlay appears on? This would not be a problem, for example if the overlay appears on the right (but could obscure code below).
For example:

Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Show Language and Select Code examples linked in the issue, then inspect how the data-label overlay is positioned when a vertical scrollbar is present. Reproduce the Firefox behavior with and without a scrollbar; done means the language label remains readable without obscuring the scrollbar, while preserving the existing no-scrollbar behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100