Nativescript + Angular: flexShrink=“1” doesn’t seems to work on iOS. Do I do something wrong?

0
votes
<FlexboxLayout style=“width: 200; background-color: red;“>
   <Label text=“AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA”
       flexShrink=“1" style=“background-color: blue;“></Label>
   <Label text=“BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB”
       flexShrink=“1" style=“background-color: green;“></Label>
   <Label text=“CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC”
       flexShrink=“1" style=“background-color: yellow;“></Label>
</FlexboxLayout>

This should truncate all 3 labels and displays all of them. It works on Android, but on iOS labels are not truncated and in this case we only see the first one.

I made a mistake ? It's a bug? Is there a trick to make it work? (StackLayout/GridLayout/DockLayout don't fit my needs)

tns-core-modules: 5.1.1

https://play.nativescript.org/?template=play-ng&id=RR4zDg

https://github.com/NativeScript/NativeScript/issues/6781

1
angularnativescript
That seems like a bug, but I'm not entirely sure. GridLayout should give you the expected output on both platforms. – Manoj
The problem with GridLayout is that colum "auto" do not respect global GridLayout width. <GridLayout columns="20, auto, auto" style="width: 200; background-color: red;"> <Label col="0" text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="background-color: blue;"></Label> <Label col="1" text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" style="background-color: green;"></Label> <Label col="2" text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" style="background-color: yellow;"></Label> </GridLayout> So, for my need it's not better than Flexbox. – jpierront
That's actually expected result of auto, Each child is taking as much space it want, you were suppose to use * to equally share the space between children. – Manoj
Yes but I don't want that "BB" take the same place than "CCCCCCCCCCCCCC" ;-) (Dynamic content) I need a working FlexboxLayout ;-) – jpierront
Then try setting align-items: center; on FlexboxLayout. If you like to still stretch the label to it's parent, set the label's height to 100%. – Manoj

1 Answers

0
votes

The bug can be bypassed by adding "align-items: center;" to FlexboxLayout (Thanks Manoj) 

<FlexboxLayout style="width: 200; background-color: red; align-items: center;">
    <Label text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
        flexShrink="1" style="background-color: blue;"></Label>
    <Label text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
        flexShrink="1" style="background-color: green;"></Label>
    <Label text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC"
        flexShrink="1" style="background-color: yellow;"></Label>
</FlexboxLayout>

You can follow the issue here: https://github.com/NativeScript/NativeScript/issues/6781