Div widget overlapping after layout overhaul in 1.1.0

[pdmich]

After new layout overhaul in bokeh version 1.1.0 Div widgets are not responding in the layout as expected.

Before version 1.1.0 - the layout looked like this:

Now the same layout looks like this:

If you force a different sizing mode other than fixed (e.g. 'stretch_both') then you at least avoid the overlapping, but the sizing still seems off. No matter what I put in the height and width when it's fixed, it doesn't seem to change size.

I'm on windows, using a Chrome browser.

Similar code snippet to what I'm using in my app:

div_header = Div(text="""
                    <h4><i>Stochastic Simulation Inputs</i></h4>""",
                                 style={
                                            'background-color': '#c8cfd6', 
                                            'outline': 'black solid thin',
                                            'text-align': 'center'
                                            }, height=15, width=610, 
                                 sizing_mode='stretch_both')

sim_duration = TextInput(title="Stochastic Simulation Length (hrs):", value="504", name='SimDuration')

layout = column(div_header, sim_duration)
show(layout)

[bryevdv]

@pmicheletty can you provide a complete example to run and test against and use to reproduce what you are seeing exactly?

cc @mattpap

[pdmich]

@bryevdv sure. See the gist here

I put in two examples with different sizing modes.

[bryevdv]

Here is a complete MRE

from bokeh.models import Div, TextInput
from bokeh.layouts import column
from bokeh.io import show

div_header = Div(text="""
                    <h4><i>Stochastic Simulation Inputs</i></h4>""",
                                 styles={
                                            'background-color': '#c8cfd6',
                                            'outline': 'black solid thin',
                                            'text-align': 'center'
                                            }, height=15, width=610,
                                 sizing_mode='stretch_both')

sim_duration = TextInput(title="Stochastic Simulation Length (hrs):", value="504", name='SimDuration')

layout = column(div_header, sim_duration)
show(layout)

[mattpap]

This needs a little bit of CSS tweaking. E.g. customizing flex basis for Div in FlexBox gives this:

[bryevdv]

Are you saying it can/should be closed, then?

[mattpap]

No, it still needs fixes, but it isn't too far off.