CODEWITHSUNDEEP
nativescriptangular2-nativescript
Jonas
Jonas

Reputation: 7915

NativeScript: Image with Text Overlay | GridLayout won't fit content

I'm having trouble with NativeScript Layouts.

I wan't this look, just with an text overlay over the image. enter image description here

The Image above was made with just an Image inside a StackLayout but when I add a Label it gets placed below. I tried using position: absolute in css but that won't work.

When I use GridLayout like this:

    <CardView class="cardStyle" shadowRadius="10" margin="10" elevation="50" radius="10">
        <GridLayout rows="*">
            <GridLayout rows="*" columns="*">
                <Image class="card-img" stretch="aspectFit" src="~/app/assets/pull.jpg"></Image>
                <GridLayout verticalAlignment="bottom">
                    <Label text="hallo" class="card-header"></Label>
                </GridLayout>
            </GridLayout>
        </GridLayout>
    </CardView>

The Layout does not wrap the height of the Image as in the picture above. enter image description here

What can I do?

Upvotes: 0

Views: 798

Answers (1)

WeezyKrush
WeezyKrush

Reputation: 494

try rows="auto" instead of rows="*"

Upvotes: 1

Related Questions