CODEWITHSUNDEEP
angularnativescript
user11766958
user11766958

Reputation: 419

NativeScript flexboxlayout

I am trying to create a flexbox layout with two columns. In the first column, I want to place an image, and in the second column I want to have a listView. I want to have something like that where the green column represents an image.

enter image description here

Here is what I have try out but it doesn't work as expected, it displays the image at the top and the text below it.

  <FlexboxLayout flexDirection="column">
        <StackLayout  width="1000" height="100%"  class="m-15" >
            <Image src="res://sideimage" horizontalAlignment="left"></Image>
        </StackLayout>

        <StackLayout >
            <ListView  [items]="dataList">
                <ng-template let-item="item">
                    <FlexboxLayout flexDirection="row">
                        <GridLayout  columns="auto,100" rows="auto,auto" width="2000" >
                            <Label class="confederacy" [nsRouterLink]="['/province', item.confederancy_name]" [text]= "item.confederancy_name" pageTransition="slideLeft" ></Label>
                            <Label class ="arrow-icon" text="&#xf0a9;" class="fas" col="1" row="0" ></Label>
                        </GridLayout>
                    </FlexboxLayout>
                </ng-template>
            </ListView>
        </StackLayout>


    </FlexboxLayout>

Upvotes: 0

Views: 654

Answers (2)

agritton
agritton

Reputation: 1328

You have to change your flexDirection to row like <FlexboxLayout flexDirection="row">. Since you have it as column it'll stack your inner StackLayouts on top of each other, instead of putting them side by side which is what you want.

Upvotes: 1

user11766958
user11766958

Reputation: 419

I use gridlayout instead to sort it.

<GridLayout columns="auto,*" rows="*">
        <StackLayout  col="0" row="0" >
            <Image src="res://sideimage"  stretch="Fill" ></Image>
        </StackLayout>

        <StackLayout  col="1" row="0" >
            <ListView  [items]="dataList">
                <ng-template let-item="item">
                    <FlexboxLayout flexDirection="row">
                        <GridLayout  columns="auto,100" rows="auto,auto" width="200" >
                            <Label class="confederacy" [nsRouterLink]="['/province', item.conf_name]" [text]= "item.conf_name" pageTransition="slideLeft" ></Label>
                            <Label class ="arrow-icon" text="&#xf0a9;" class="fas" col="1" row="0" ></Label>
                        </GridLayout>
                    </FlexboxLayout>
                </ng-template>
            </ListView>
        </StackLayout>
      </GridLayout>

Upvotes: 0

Related Questions