CODEWITHSUNDEEP
nativescript
erdemgunenc
erdemgunenc

Reputation: 997

Nativescript inner StackLayout

Hello everyone I'm trying to make inner StackLayouts but the second one comes to top of first one so that I can't see the second StackLayout should I handle with css if it is how or is there an other way

Here is my code 

<StackLayout orientation="horizontal">
    <StackLayout width="500">
         <GridLayout columns="50, *" rows="*" width="500" height="50" 
         verticalAlignment="top">
               <Label text="Name" row="0" col="0" backgroundColor="red">
               </Label>
               <Label text="Fol" row="0" col="1" class="alignRight" 
               backgroundColor="blue"></Label>
         </GridLayout>
    </StackLayout>

      <StackLayout orientation="horizontal" width="500" height="180"> 
           <Image src="http://lorempixel.com/400/200" width="500" left="10" 
           top="30">
           </Image>
      </StackLayout>
</StackLayout>

Thank you

Upvotes: 0

Views: 339

Answers (1)

nick.tsilivis
nick.tsilivis

Reputation: 55

At first I would delete the widths to see how the page is displayed. 500 is a very big value. Only large tablets can support that. As an example at first I would try this :

<GridLayout columns="auto, auto">
    <GridLayout col="0" columns="50, *" rows="*" verticalAlignment="top">
          <Label text="Name" row="0" col="0" backgroundColor="red">
          </Label>
          <Label text="Fol" row="0" col="1" class="alignRight" 
               backgroundColor="blue"></Label>
    </GridLayout>
    <Image col="1" src="http://lorempixel.com/400/200" left="10" op="30">
    </Image>      
</GridLayout>

After you see the two parts align horizontally you can start tweaking the widths

Upvotes: 1

Related Questions