0

I'm trying to find a way to display 6 images in two columns and 3 rows. With for columns and images should be 50%. Here is my code and it does not "overflow" second and third row. 

<Repeater items="{{ sviKatalozi }}">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal" width="500" height="1000" />
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
            <Image width="180" margin="10" src="{{ 'http://imageurl' + katalog_image }}" />
        </Repeater.itemTemplate>
</Repeater>

I have found perfect solution <FlexboxLayout> to arrange things in way I want, but could not find a way to use observables and data binding. It does not work if put items="{{ sviKatalozi }}" inside. 

<FlexboxLayout flexWrap="wrap" height="50%" width="100%" backgroundColor="lightgray">
<Label text="Label 1" width="50%" height="50" backgroundColor="red"/>
<Label text="Label 2" width="50%" height="50" backgroundColor="green"/>
<Label text="Label 3" width="50%" height="50" backgroundColor="blue"/>
<Label text="Label 4" width="100" height="50" backgroundColor="yellow"/>
</FlexboxLayout>

Is there any way to make this work? Thanks

Maka
  • 371
  • 3
  • 14
  • can you please add playground demo link? – bhavin jalodara Jul 01 '18 at 03:07
  • better to show your component code too i.e for 'sviKatalozi' – Idrees Khan Jul 01 '18 at 13:32
  • Hi guys, here is example https://play.nativescript.org/?template=play-js&id=WDZiP1 It is not Repeater as I have ListView now but same thing. I want to order it like this https://o.dam-img.rfdcontent.com/cms/003/170/559/1000x400_crop-north-force.jpg – Maka Jul 04 '18 at 23:17

1 Answers1

0

use ngFor like this 

<GridLayout *ngFor="let item of placesArray" width="50%" class="placeBox">

instead of Repeater

Mohamed Alikhan
  • 1,315
  • 11
  • 14