NativeScript: Image with Text Overlay | GridLayout won't fit content
up vote
0
down vote
favorite
I'm having trouble with NativeScript Layouts.
I wan't this look, just with an text overlay over the image.
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. 
What can I do?
nativescript angular2-nativescript
asked Nov 9 at 19:47
Jonas
334114
add a comment |
up vote
0
down vote
favorite
I'm having trouble with NativeScript Layouts.
I wan't this look, just with an text overlay over the image.
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.
What can I do?
nativescript angular2-nativescript
asked Nov 9 at 19:47
Jonas
334114
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm having trouble with NativeScript Layouts.
I wan't this look, just with an text overlay over the image.
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.
What can I do?
nativescript angular2-nativescript
asked Nov 9 at 19:47
Jonas
334114
I'm having trouble with NativeScript Layouts.
I wan't this look, just with an text overlay over the image.
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.
What can I do?
nativescript angular2-nativescript
nativescript angular2-nativescript
asked Nov 9 at 19:47
Jonas
334114
asked Nov 9 at 19:47
Jonas
334114
asked Nov 9 at 19:47
Jonas
334114
asked Nov 9 at 19:47
Jonas
334114
asked Nov 9 at 19:47
Jonas
334114
334114
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
try rows="auto" instead of rows="*"
answered Nov 9 at 19:53
KrusherKailash
517
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
try rows="auto" instead of rows="*"
answered Nov 9 at 19:53
KrusherKailash
517
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
add a comment |
up vote
1
down vote
accepted
try rows="auto" instead of rows="*"
answered Nov 9 at 19:53
KrusherKailash
517
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
try rows="auto" instead of rows="*"
answered Nov 9 at 19:53
KrusherKailash
517
try rows="auto" instead of rows="*"
answered Nov 9 at 19:53
KrusherKailash
517
answered Nov 9 at 19:53
KrusherKailash
517
answered Nov 9 at 19:53
KrusherKailash
517
answered Nov 9 at 19:53
KrusherKailash
517
517
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
add a comment |
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
Thank you, that was easy :D
– Jonas
Nov 9 at 20:03
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232375%2fnativescript-image-with-text-overlay-gridlayout-wont-fit-content%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
