HTML widget content does not have width

Widgets
1

I’m trying to display a scrollable wide div inside HTML widget. My problem is that the HTML widget wraps my content with a div with class “widget-html-content” which does not have a width property set, therefore my div doesn’t detect the correct boundary in order to display the scroll bar.

image
image906×163 24.7 KB

Adding manually to “widget-html-content” a property of “width: 100%” solves the problem

from ipywidgets import HTML, Layout, VBox

html = """
This should remain visible
<div style="overflow-x:scroll">
    <div style="display: flex;flex-direction: row;">
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>

    </div>
</div>
"""

HTML(html, layout=Layout(width='500px', overflow='hidden'))
2

Desired result:
image

3

Yeah, a lot of the styling is pretty hard-coded and doesn’t always do what a given use case requires.

The most robust way to do this, in my experience, is to add_class another, custom class to the top-level thing you want to change, and then emit style which affects that class and its children.

1 Like
4

Thanks. I’m not sure what do you mean by emit style, I tried the following:

from ipywidgets import HTML, Layout, VBox

html = """
This should remain visible
<div style="overflow-x:scroll">
    <div style="display: flex;flex-direction: row;">
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>
        <div style="min-width:200px;">loooooong div</div>

    </div>
</div>
"""

fill_width_class = 'fill-width'
fill_width_css = """
<style>
    .fill-width {
        width: -moz-available;          /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
        width: fill-available;                
    }
</style>
"""

box = VBox([
    HTML(fill_width_css),
    HTML(html, layout=Layout(width='500px', overflow='hidden')).add_class(fill_width_class)
])
box
5

Right: but add the class to the parent vbox, in this case, and use the cascading nature to specify widths at all the levels you need.

If it’s a limitation of the outer css, there’s not much you can do.