Conditional Views Inside ScrollView

ios
android

#1

Hi

I have created a playground example https://play.nativescript.org/?template=play-tsc&id=lUXwID&v=121. It has following xml structure:

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

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/

Thanks,
Rakesh


#2

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


#3

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:


#4

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?


#5

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.


#6
  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.

#7

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