My standalone HTML with newer versions of Bokeh gets overlapped by a footer when embedded into a website... why?

Hi,

I’m new here, not a developer, and barely a programmer… I don’t really know how to ask my question and I may not fully understand your answer, so apologies in advance.

I’ve developed interactive plots with Bokeh and have embedded the HTML (copied as text) into an HTML block/field (?) on the website of an agency I support. I developed these plots with Bokeh 1.1.0. When embedded on the website, they look great.

I recently upgraded to Bokeh 1.4.0, then more recently to 2.0.0. With either of these versions, the scripts still run fine and produce the HTML output as before, and when rendered by themselves in a browser (i.e., not embedded into the website) they look identical to those created with 1.1.0.

But now when I embed the HTML into the website, same as before, for some reason a footer on the website seems to ride up overtop and overlap the embedded Bokeh plots.

My question is… any idea what might cause this and how I might be able to address it in newer versions of Bokeh?

If it helps, I use output_file/save from bokeh.io to produce the HTML plot files. When I view the resulting HTML code, the text with stuff like stylesheet and scr looks different now, guessing this might be the problem, but then I don’t know anything about this. Seems there are options to specify resources when calling “save”, could I do something with this to use the same resources as in 1.1.0? And if so, is this a safe mostly permanent solution, or might I lose this option someday?

For now I’ve reverted to using my old separate environment with Bokeh 1.1.0 to deal with this. But knowing the issue, I’m hoping I might be able to address it with the newer versions.

@bruxerjk without actual details, it’s not really possible to speculate. All I can say is that the new 2.x version specifier is a major release bump which indicates that there were breaking changes.

Thanks for the response, I can try to provide details just not sure what might be helpful?

A publicly accessible link to the HTML file in question would be one start. As well as information about what exactly you are doing to “embed” the plot, since that could mean lots fo things. However, I can state definitely that the internal DOM and CSS structure did change fairly significantly for 2.0. If you were relying on those details directly somehow during your embedding (e.g. overriding Bokeh CSS values, we don’t really encourage that), then your code will definitely need to adapt.

Happy to show these off, here’s the link. The footer at the bottom of the page is what rides up onto the plots above when using newer versions of Bokeh.

Embedding the plot, for me, means copying and pasting the HTML text into a field of a content management system that I have no control over and don’t know much about.

Well, first off the output of output_file and show is a complete, standalone HTML file. I would not regard simply copy and pasting that into another HTML file as a reliable or supported way of embedding since that is guaranteed to produce invalid, malformed HTML. Your linked document has two <head> sections, for instance. There are various supported ways of embedding Bokeh content described in the User’s Guide section Embedding Bokeh Content. If you are limited to copy and pasting in a CMS then either json_items or components could be potentially used.

All that said, I can’t actually reproduce any issue with that file on OSX with any of Chrome, Firefox, or Safari, despite all manner of window resizing:

Screen Shot 2020-04-03 at 11.22.00 AM1620×1970 415 KB

So more information about your particular browser/system is also needed.

In the link I sent the standalone plots were done using v. 1.1.0 so it doesn’t create the problem for me either. But this is helpful information, I’ll look into json_items and components and see if I can sort it out from that before I ask for any more of your time, really appreciate the help.

Realize this is nearly a year old, but since I’m here, wanted to share the solution to this issue just in case someone else stumbles upon it and has the same problem.

The standalone HTML had several elements that were using absolute positioning and this was causing the div containing the application to not have the same height as all of the inner elements combined. This would then cause the footer of the site to overlap some of the elements. I’m not sure why this did not cause issues with older versions of Bokeh, but in any case, by adjusting the sizing modes used for the different elements, all elements now fit within the full application and there’s now no overlap issue using older or newer versions of Bokeh.

As was also suggested, we’ve moved to using json items rather than embedding the standalone HTML.