ExperimentalLayout.hbox creates horizontal overflow and scrollbar if combining plot output with widget

[schlichtanders]

Hello,

I would like to use the ExperimentalLayout feature, but am stuck at how to force everything into Pluto's standard cell width.

While at least the plot is responsive (I can test it by making the window width smaller and see it getting smaller and smaller) the combined hbox does put the plot in full cell-width next to the UI elements.

This example does not have the scrollbar, but it also shows that the resizing does not work. If I am decreasing the overall browser width, finall the markdown ui element does disappear completely.

Every help is highly appreciated.

[holomorphism]

Hi, @schlichtanders.

Is it correct that your problem is that the plot is too large in ExperimentalLayout.hbox and the elements on the left are crushed? (I am not a native English speaker, sorry if I am misreading you)

I think the easiest workaround is to specify a size option for the plot. Look at the following image. (The width is specified as 400 pixels with the size=(400,300) option of the plot function)

However, if the width of the drop-down menu is wide, even if you reduce the width of the plot, it may be cut off as shown in the image above.

In that case, you may want to use ExperimentalLayout.vbox instead of ExperimentalLayout.hbox. However, when I tried vbox, it always seemed to expand the plot to the full width of the cell. After a little trial and error, I added the following to the style option of vbox, and it looks natural.

PlutoUI.ExperimentalLayout.vbox(
    [choose, plot(rand(10); size=(500,300))];
    style=Dict(
        "justify-content"=>"center",
        "max-width"=>"fit-content",
        "margin-left"=>"auto",
        "margin-right"=>"auto",
    )
)

[schlichtanders]

Thank you for your response.

My problem is that I don't understand why the plot correctly resizes, when the overall pluto width shrinks, but does not resizes when inside an hbox.

Hardcoding pixels is no option for me - I need a responsive layout. (Like Pluto itself is). I thought hbox is actually intended to be responsive - then this looks like kind of a bug in hbox.

[holomorphism]

Ah, that's what you meant. Sorry.

[fonsp]

Hey! You can wrap the plot in a div with flex: 1 1 auto, i.e. replace [chooser, plot] with

[
    chooser,
    PlutoUI.ExperimentalLayout.Div([plot]; style=Dict("flex" => "1 1 auto")),
]

Maybe this should be the default? I find it a bit difficult to decide on the API of ExpeirmentalLayout, maybe people should just have easy access to the original flex CSS API with no extras...

[schlichtanders]

It is a bit off topic, but to give comment to your last question about the design of ExperimentalLayout:

I build a little hypertext wrapper which replaces divs with ExperimentalLayout.Div It needs to parse the string, which feels like an overhead, but on the other side it is probably fine.

This way you get an intuitive html interface. The only downside is that only Divs are supported so far, but especially when using Markdown, the table tags would be super useful as well.