search

PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.25k stars 1.29k forks source link

Data Label Overlay shows over Vertical Scroll Bar #2134

Open LarnuUK opened 4 years ago

LarnuUK commented 4 years ago

Information:

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: image

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

Example Show Language demonstrates this.

You can also see this below using the Select Code data label and the Show Language option: image 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: image

LarnuUK commented 4 years ago

This actually appears to be more related to Data labels, actually, rather than the above mentioned Plugin. I've added the Select Code button, and now that overlaps the Scroll bar. I'll amend the submission accordingly.

RunDevelopment commented 4 years ago

This is a general problem that the Toolbar plugin has. The problem is that the toolbar (aka. the buttons and labels you see) is aligned relative to a wrapper around the <pre> element. But this means that it can't take <pre>'s scrollbar into account.

One possible solution would be to wrap the toolbar in another <div> whose width will be set to the clientWidth of the <pre> element. Of course, this wrapper has to be updated when the size of the <pre> changes. I'll probably implement this solution in the next couple of days.

LarnuUK commented 4 years ago

Thanks @RunDevelopment . Is there a way to have the Toolbar Plugin display the buttons on the left instead, if I wanted?

mAAdhaTTah commented 4 years ago

@LarnuUK You could write some custom CSS targeting the toolbar and situate them wherever you'd like. There isn't a built-in option or anything like that though.