sidenav not expanding using flex-layout container

[Technophile-services]

Hello, total noob here so please be merciful.

I am developing a production servoy application for my company internally and also as a saas for my clients so I'm willing to contribute if I can help.

What I'm looking for is to make sidenav work well in a responsive/flex layout configuration. I've found with much fiddling that the grid component works well in this setting but not sidenav.

For example, I make a responsive layout with : flexlayout div and a flex-content div and the grid in the flex-content div, when set to responsiveHeight: 0 takes the full available space in the container, sweet!

However, if I put this form in the containedForm property of sidenav it stays the height of the togglePosition icon and does not flex further anymore.

Also, using the same sidenav component inside a flex-content div does not expand to the height container like grid does.

[paronne]

Hi, when the responsiveHeight is set to 0 the grid will use 100% of it't container, therefore will fill the whole available space when placed in a flex-content div. The sidenav instead will just use as much height it needs to display it's content when the responsiveHeight is set to 0; therefore won't stretch to fill the whole flex-content div. If you want to have such behavior you can add in the same div with the style class flex-content another style selector called svy-wrapper ( therefore your div will have style class ="flex-content svy-wrapper". The svy-wrapper class is normally added automatically by Servoy in Simple CSS forms. Components within a svy-wrapper container would normally fill the whole space as you are looking in this use case.

Please close the case if this solution is workable for you.

Regards, Paolo

[Technophile-services]

Yes that does it for the sidenav component thank you so much!

However, I still cannot figure out how to propagate the flex height to the containedForm of the sidenav. Please let me know if I should address this issue somewhere else as I have not managed to get any subform get flex height yet even when not specified in a component...

What I tried is :

Form: 'form' ( flexlayout ) ( flex-content svy-wrapper ) component sidenav responsiveHeight = 0, containedForm = 'subform'

Form: 'subform' ( flexlayout ) ( flex-content svy-wrapper ) is the class svy-wrapper necessary here? component datagrid responsiveHeight = 0

Sidenav occupies the full height but datagrid does not get full height.

[paronne]

Hi, if your contained form is also a responsive form, again default height will be auto; to make it stretch and fill all available space you should set the styleClass of the contained form to a class giving it 100% of the height. e.g. .full-height { height: 100%; }. Mind asking, is the form with the sidenav your main outer form ? Not necessarely all your forms must be responsive, in some scenario Simple CSS form are good enough and simpler to design ( since sizing & positioning is controlled via form editor properties ). Check this sample solution https://sample.servoy.com/ the outer form with the Sidenav and Navbar is a Simple CSS form; containedForm can then be Responsive type, designed as in image below: Navbar anchored top, left & right and Sidenav 50 px from the top anchored to all 4 corners so it can stretch to fill the screen.

[Technophile-services]

Mind asking, is the form with the sidenav your main outer form ?

Yes it is actually. And yes I understand not everything needs to be responsive, I tried with both CSS and Responsive form for the sidenav outer form with the same result.

However, while tossing around the containers and classes I managed to suddenly make it work in a test solution! Except for the svy-wrapper class in the sidenav which need to be there I cannot understand why it suddenly works, with both CSS and Responsive forms as the outer form...

I'm trying to replicate the same result in my production application but have not managed to do it so far. Is there a cache somewhere that keeps divs and classes that needs to be refreshed?

These responsive forms are truly mysterious beasts, seems quirky/buggy because the results vary for unknown reasons.

I will close the issue since obviously it is not a servoy-extra-component problem it does work as expected, I will try my best to narrow down my current issue which is more like getting expected results from the responsive forms themselves.

Thank you so very much Paolo for your input!