Responsiveness not working on Window

[h3inz3l]

When using the Responsive Layout in a Vaadin Window the Responsive Columns still get rescaled by the browser window width and height, that makes it impossible to work within a Vaadin window.

If the Window is maximized, it will, for sure, work, because it uses browser width and height.
But if the Window Size is smaller, resizing the Window won't actually make the Responsive Layout rearrange or rescale the Rows and Columns.

[JarekToro]

Yeah this is something I have been thinking about aswell.

[h3inz3l]

But actually with the current bootstrap css this is not possible.

The only way i could think about is handling the window in vaadin Like a real Browser window. Maybe with a custom css File or in a completely different way, with only vaadin based css.

[JarekToro]

Your are correct, it will take custom CSS, that's why I haven't added this yet. But I something I definitely want.

[ramazanpolat]

I have been trying to get responsiveness work until I realized it's not working because it's in the Vaadin Window :(

[utrucceh]

Hi I try something, it can't solve but maybe help you for fix:

1. window.addResizeListener { } ==> it is listening and working for resize but not working for maximize minimize
2. When click to any button inside of window, layout resizing and fixing, maybe it will bring some ideas
3. there is Page.getCurrent().addBrowserWindowResizeListener { } method but I thing it will not help
4. I try to put ResponsiveLayout to VerticalLayout, Panel, Panel(VerticalLayout(resLay)) but also this not help, problem not solved :)
5. ==> Page.getCurrent().getJavaScript().addFunction() ==> I didn't try, but maybe someting help for listen VaadinWindow resize with javascript

[utrucceh]

I find someting:
When window maximizing, layout resizing for small area (before maximize), when windox minimizing layout resizing for full screen area(before minimize size)
What I think if there is some listeners for resize like 'onResizingStarted', if replaced like 'onResizingFinished' will solve problem

[dangllucas]

The Problem here is, that responsive-layout uses flexbox css.
This css works with browser width and because it is css, it will all work on the client side.

It may be possible to work with listeners here and apply css rules to the layout manually, but this would completely removes the advantage of css. So you always got on any window you use in vaadin server rpc calls, which will slow down your whole project.

It may be a workaround, but not more than that.

[utrucceh]

Yes, I understand, but I am trying somethink like server send javascript code to client, client work on it
For example
document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};
It can send via server when window show, and it will work on client size
For Example:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onresize_dom

[JarekToro]

I believe the best approach is to create a CSS subset that is based on the v-window[width] I just haven’t had time to get a proof of concept together. The solution should be purely CSS