Responsive layout with reflow for screen rotations?

Bryan · September 12, 2021, 6:40pm

There’s not any especially clean way I can think of. Did someone suggest otherwise? Maybe something like:

Python DocumentReady sets some property value just to trigger a CustomJS
JavaScript CustomJS reads window size and sets as a property value on some other object
Python property change callback uses window size

ghomem · September 12, 2021, 6:43pm

I am perfectly aware that no solution is ideal Just want to check if I was thinking right and from your answer it seems so.

I will test and let you know how it went.

Thanks again.

ghomem · September 13, 2021, 2:05am

Hello,

So here is the progress on this matter:

Click here using your phone:

https://coviz.io/

and compare to the result on a desktop.

This is not perfect but is much better than before. There are absolutely no performance problems on reflowing the layouts like I am doing here:

If we had a window resize event that could do some work after the user finishes resizing the window the situation would be much improved. Any ideas about that?

Thanks for great support.

Bryan · September 13, 2021, 2:25pm

That seems reasonably self-contained so I’d suggest a GitHub Issue.

ghomem · September 14, 2021, 12:54am

Thanks. Here is the issue:

github.com/bokeh/bokeh

Provide window resize event

opened 12:52AM - 14 Sep 21 UTC

ghomem

type: feature tag: component: bokehjs tag: component: server

**Is your feature request related to a problem? Please describe.** In order to …provide a python based reflow we need a window size event that can be hooked to a callback the manipulates the layouts (example horizontal versus vertical). This has been discussed here: https://discourse.bokeh.org/t/responsive-layout-with-reflow-for-screen-rotations/8219/23 **A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]** For the sake of concern separation we would like to keep the layout logic on Bokeh and allow the switch between horizontal and vertical modes directly on the python code. **Describe the solution you'd like** A Bokeh WindowResized event that can be connected to a python callback. **Describe alternatives you've considered** The alternative is inserting individual plots - rather than grid - into the HTML, forcing the user to understand the complexities of HTML reflows. **Additional context** Add any other context or screenshots about the feature request here. This vertical layout, from an otherwise horizontal website, has been achieved thanks to the DocumentReady event. With a WindowResized event we would achieve complete responsiveness. ![Screenshot_20210914_015340](https://user-images.githubusercontent.com/3352900/133176199-ea6764db-a7c6-4f21-a446-7c342af1dcc8.png) More information here: https://discourse.bokeh.org/t/responsive-layout-with-reflow-for-screen-rotations/8219/23

ghomem · November 28, 2021, 4:31am

Hi @Bryan ,

Just wanted to leave you a note about the window size versus reflow topic: the method you provided above is proven to work. It enabled much progress on making the Bokeh app more mobile friendly whereas keeping the python code clean and tidy, and not mixed with the HTML.

We are experimenting with a PWA:

https://coviz.io/pwa/

You will see that there is a funky loading behavior that is caused by the necessity of using the DocumentReady callback hack, instead of having the window size from the beginning. Having the window size at the python side and having access to a window resize event would clean up the situation.

That said, what we are doing now is much better than nothing It makes a big difference for mobile browsing.

Thanks for the support

system · February 26, 2022, 4:31am

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.