Nativescript transparent row gridlayout

0
votes

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.

1
nativescriptnativescript-angular
Have you tried StackLayout as well? - Narendra
If I understood your query correct, I don't really see any issues in there. Here is a Playground sample. - Manoj
Close @Manoj play.nativescript.org/?template=play-ng&id=afYWWQ&v=3 - J. Doe
See how where the row is transparents (where it curves) the text disappears? I'm trying to make it to visible there. - J. Doe
And yes @NarendraMongiya I've tried just about everything including stacklayout, been at it for hours. - J. Doe

1 Answers

0
votes

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