Displaying HTML with no output results in unwanted vertical whitespace

[thatlittleboy]

I have a Report() class that generates a report programmatically via IPython's HTML, Markdown, and display classes/functions.

A minimal example (run this in a single notebook cell):

from IPython.display import HTML, Markdown, display
import holoviews as hv


class Report:
    CSS = """
    .foo {
        color: blue;
    }
    """
    def __init__(self):
        self._preload_css()

        hv.extension('bokeh', logo=False)  # <<<<<<<<
        self.components = []

    def _preload_css(self):
        css_to_load = self.CSS
        display(HTML(f'<style>{css_to_load}</style>', metadata={'isolated': True}))  # <<<<<<<<
        return self
    
    def section(self, title, **kwargs):
        level = kwargs.get('level', 1)
        obj = Markdown('#' * level + ' ' + title)
        self.components.append(obj)
        return self
    
    def display(self):
        for obj in self.components:
            display(obj)


display(Markdown('~ BEFORE ~'))
r = Report().section('S1').section('S2')
r.components.append(HTML("<div class='foo'>Test that CSS is loaded..</div>"))
r.display()
display(Markdown('~ AFTER ~'))

then nbconvert the notebook to html (!jupyter nbconvert testhtml2.ipynb --no-input): it helps with visualizing the problem.

The resulting HTML (and inspecting elements):

Problem:
Notice the big vertical whitespace sandwiched between the "Before" Markdown text and "S1" heading, caused by the 4 empty divs.
Three of these divs are caused by Holoviews loading the bokeh backend, and the last is caused by having to display the HTML used to inject CSS style. I've marked these two offending lines in the minimal example code above.

Is there any way to avoid these whitespaces in the rendered HTML? I tried to use IPython.utils.capture.capture_output to wrap around the offending lines, but it didn't quite work (CSS didn't load).
Essentially, is there a display-like function that "renders" the HTML but not output it to the frontend?

(I recognize that the "holoviews loading bokeh" part might not be able to fixed from IPython's side, but is there at least a solution for loading CSS / arbitrary HTML code that has no output / results in a 0 height div in the output?)

Thanks.

[mhlinder]

Did you ever identify a way to fix this problem?

[thatlittleboy]

@mhlinder Nope, unfortunately not.