How to span a particular row across multiple columns in GridLayout


#1

Source Code:

how to spread the row with asterisk (second row inside first row of gridlayout) across multiple columns

<GridLayout rows="8*,*,4*">

    <GridLayout row="0" rows="100, 30 , *" columns="150 , *" class="layoutBackgroundImageFromFolder" width="100%">
        <StackLayout row="0" col="0" margin="10">
            <Image src="~/assets/images/IBM_logo.png" (tap)="reset()" height="100%"></Image>
        </StackLayout>
        <StackLayout row="1">
            <label></label>
        </StackLayout>
        **<GridLayout row="2">**
            <Label text="Welcome to IBM Silicon Valley Lab What Brings You In Today?" width="100%" height="100%" color="#FFFFFF" textWrap="true"
                class="h1  text-center"></Label>
        </GridLayout>
    </GridLayout>

    <GridLayout row="1">
        <label height="1%"></label>
    </GridLayout>

    <Gridlayout row="2" rows="100,100" columns="*,*" margin-top="0" width="75%">

        <StackLayout row="0" col="0">
            <Button class="btn btn-success" (tap)="signin()" height="80%" width="95%" text="MEETING" class="btn btn-info btn-rounded"></Button>
        </StackLayout>

        <StackLayout row="0" col="1">
            <Button class="btn btn-success" (tap)="signin()" height="80%" width="95%" text="SOCIAL" class="btn btn-info btn-rounded"></Button>
        </StackLayout>

        <StackLayout row="1" col="0">
            <Button class="btn btn-success" (tap)="signin()" height="80%" width="95%" text="INTERVIEW" class="btn btn-info btn-rounded"></Button>
        </StackLayout>

        <StackLayout row="1" col="1">
            <Button class="btn btn-success" (tap)="signin()" height="80%" width="95%" text="SERVICE" class="btn btn-info btn-rounded"></Button>
        </StackLayout>

    </Gridlayout>


</GridLayout>

#2

Use colSpan as described in the GridLayout docs.


#3

thanks … :slight_smile: