Plotly.js: Minor mention: modebar tooltip slightly protrudes

Created on 22 Jun 2017  路  5Comments  路  Source: plotly/plotly.js

Mode bar hover tooltip Produced with Plotly - or other button tooltip if plot is narrow enough for modebar buttons to wrap - breaches the container size of its own graphDiv, causing a vertical widening of what's rendered:

image

The consequence (not seen) is that an x scrollbar on the bottom appears, which, as it takes space, causes a y scrollbar too (as seen).

Ideally, there is no protrusion, so a responsive dashboard can be made to fill the screen without risk of scrollbars appearing due to a couple of pixels.

Perfectly good-looking workaround: d3.select('body').style('overflow', 'hidden')

image

(Issue can be closed if unimportant; just a way of mentioning)

bug

Most helpful comment

Looks like this one got fixed during @antoinerg 's recent modebar work.

All 5 comments

Interestingly, a similar protrusion on the left side doesn't appear to trigger the same issue, still noting it as a future iteration might shift tooltips such that they're visible in their entirety. All these are only (slightly) useful on the document body edge, but I guess in some cases it's useful if the tooltip is contained by the gd whether or not its edge is on a document body edge or not.

image

Again, just a contest entry for the 'most minor issue possible' title :-)

Nothing's too minor @monfera 馃攳 馃弳

Seems to me the simplest way to keep this from happening is to add overflow:hidden to .svg-container - which cuts off the pleasant curve on the edge of the tooltip, but that's better than overstepping our bounds! Then secondarily we can look for a way to push it back on screen, curves and all.

@monfera I was looking for information on to position the modebar to the left instead of the 'default' to the right and came across this issue. In your second comment you show an example with the modebar positioned to the left, how did you do that? Is there an option for it?
I can simply add the following css .modebar { left: 2px !important; } but then tooltips overflow the container a bit and I do not know if any other styling needs adjustment...

@ThijsBroersen I'm aware of no option, it appears on the left because there are three plots horizontally aligned and it's on the leftmost plot.

Looks like this one got fixed during @antoinerg 's recent modebar work.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

danielsamuels picture danielsamuels  路  3Comments

jonmmease picture jonmmease  路  3Comments

nicolaskruchten picture nicolaskruchten  路  3Comments

maxwell8888 picture maxwell8888  路  3Comments

mithi picture mithi  路  3Comments