Search code examples
nativescriptnativescript-angular

Nativescript transparent row gridlayout

I have a grid layout with a fixed header and navbar and a scrollview for the page

<GridLayout rows="50, *, 50">
<StackLayout row="0">
    // header
</StackLayout>

<ScrollView row="1">
    <StackLayout>
        // page
    </StackLayout>
</ScrollView>

<StackLayout row="2">
    // nav
</StackLayout>

I'm trying to float images over the scrollview (it's part of the header) and the images have transparency. I want the scrollview to be able to scroll while fixed images are over it.

I've tried absolute layouts, rows #s that are the same, everything.

What would be ideal would be to have a gridrow that has a transparent middle that I can put over the scrollview.

Solution

  • I think what you're looking for is the isUserInteractionEnabled view property.

    <GridLayout>
  <ScrollView>
    <StackLayout> <!-- content --> </StackLayout>
  </ScrollView>
  <StackLayout isUserInteractionEnabled="false"> <!-- overlay --> </StackLayout>
</GridLayout>

    Example: https://play.nativescript.org/?template=play-ng&id=afYWWQ&v=5