Flexbox layout bug or my fault?


#1

Hello,
I’m using the Flexbox layout in a list item, I have a Label that can grow to multiple lines, up to 2 lines it works fine but with 3 lines it stops growing. The same layout works fine when using DockLayout.

I may using the layout wrongly, can you please check it and let me know? Here it is:

<StackLayout>
    <ListView [items]="events" class="list-group" dock="top" height="100%"
              (itemTap)="onItemTap($event)">
        <template let-item="item" let-i="index" let-odd="odd" let-even="even">
            <FlexboxLayout class="container" flexDirection="row" alignItems="flex-start" verticalAlignment="top">
                <Label [text]="item.date | date:'MMM d'" backgroundColor="#ffe4c4" class="date" width="80" flexShrink="0"></Label>
                <FlexboxLayout class="sub-container" flexDirection="column" backgroundColor="#7fffd4" flexShrink="1">
                    <Label [text]="item.name" class="title" textWrap="true" flexGrow="3"></Label>
                    <Label [text]="item.type" class="subtitle" textWrap="true"></Label>
                </FlexboxLayout>
            </FlexboxLayout>
        </template>
    </ListView>
</StackLayout>

And this is the result (notice the item pointed by the arrow):

Here the DockLayout version:

<StackLayout>
    <ListView [items]="events" class="list-group" dock="top" height="100%"
              (itemTap)="onItemTap($event)">
        <template let-item="item" let-i="index" let-odd="odd" let-even="even">
            <DockLayout class="container" stretchLastChild="true" verticalAlignment="top">
                <Label dock="left" [text]="item.date | date:'MMM d'" class="date" backgroundColor="#ffe4c4" width="80" verticalAlignment="top"></Label>
                <StackLayout class="sub-container" backgroundColor="#7fffd4" orientation="vertical">
                    <Label [text]="item.name" class="title" textWrap="true"></Label>
                    <Label [text]="item.type" class="subtitle" textWrap="true"></Label>
                </StackLayout>
            </DockLayout>
        </template>
    </ListView>
</StackLayout>

and (correct) result:

Any idea?

Thanks,
Dem


#2

What happens when you tweak those flex-shrink values?


#3

I’ve tried changing them, I think the element are horizontally shrinking properly but vertically it doesn’t give space for the 3rd line so it doesn’t fit…

Do you think I should open an issue on github?

Thanks,
Dem


#4

I feel like there may be something we’re not understanding about the way Flexbox works. I’ll try to engage Hristo if I can catch him here :slight_smile:


#5

Hello, thanks that’s great, I’m using the other layout in this case but I’ve posted this problem in the forum because I want to understand if it’s me or if it’s the layout that has some problem, I like the concept of Flexbox so I’d like to be able to use freely knowing it works properly…

Let me know if you find anything, I’ll do more experiment with the Flexbox layout as soon as I can…

Cheers,
Dem


#6

Hi,

This seems a problem in the android FlexboxLayout we’ve adopted and ported for iOS. The issue is easily reproducible in both iOS and Android and have been logged here: https://github.com/NativeScript/NativeScript/issues/3834
Please use DockLayout in place of the outer FB for now.

Regards,


#7

Panayot confirms that we’re not going crazy, Dem :smiley:


#8

ahahah indeed @jen.looper that’s good to know :slight_smile: thanks @pana I’m following the bug now…