Conditional Views Inside ScrollView




I have created a playground example It has following xml structure:

<StackLayout visibility="{{results.length>0?'visible':'collapsed'}}">....</StackLayout>
<FlexboxLayout visibility="{{results.length==0?'visible':'collapsed'}}"></FlexboxLayout>

As you see from the visibility condition, either inner stacklayout or flexboxlayout will be visible. You can uncomment line 12 from home-view-model to view flexboxlayout and comment to see how stacklayout looks.
The problem that I face is FlexboxLayout is just shown in 30% screen and not on the whole page. When I set height=100% of StackLayout in which both stacklayout and flexboxlayout then the StackLayout gets distorted.

Can someone please guide me how can I change this so that the StackLayout retains its look and FlexboxLayout takes whole page screen/



You should use a GridLayout instead of StackLayout, set the rows to "auto,*".


Thank you for the reply. Its either ScrollView is not scrollable when I set the height of GridLayout to 100%. Example below:

Or FlexboxLayout doesnt spread over full page when the height is not set to 100%. See the example below:


I’m not sure what exactly your design is, you seem to nest too many layouts. Can you share some sketch or mockup what exactly you are trying to achieve?


I want to show flexboxlayout when result is 0 like following:

And if result is greater than zero then i want to show following screen which should be scrollable.

  1. I would suggest to use a ListView / RadListView as there are n number of rows which looks similar so that improves your performance.
  2. You don’t need extra Flexbox, you can everything with a GridLayout and conditionally show.


Managed to get this done now using GridLayout as you suggested: