Navigation Button


#1

I referenced this issue a while back and people gave me suggestions on how to do it and i embraced the suggestions.
Althought i couldnt get to a clear solution…
What i pretend is something like this:

But, i can’t achieve it.

I tried every possible solutoion, but i can’t get the NavigationButton “>” to stay like this one.
I tried to implement FontAwesome but i couldnt…

What i have so far:

transactions.html

  <StackLayout (tap)="paymentDetails()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <GridLayout rows="auto auto auto" columns="* *">
      <Label class="labelTransactionType" text="Payment" textWrap="true" row="0" col="0" marginTop="10"></Label>
      <Label class="labelTransactionValue" text="-€19.00" textWrap="true" row="1" col="0"></Label>
      <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="5"></Label>
      <Label class="labelTransactionData" text="Date: 1 of April of 2017" textWrap="true" row="2" col="0"  marginBottom="10"></Label>
    </GridLayout>
  </StackLayout>

Transactions-common.css:

.layoutImageRhombus{
  margin-top:-590;
  margin-Left:-290;
  width:70;
  height:70;

}

.imageRhombus{
  width:70;
  height:70;
}

TextField {
  color: white;
}

.transactionsButtons {
    display:inline-block;
    text-align:right;
    text-transform: capitalize;
}

.labelTransactionType{
  margin-Left:10;
   height:25;
}

.labelTransactionValue{
 margin-Left:30; 
 height:40;
 font-Size:24;
 color:black;
}

.labelTransactionData{
  margin-Left:10;
  height:20;
}

What appears on my phisical device i am working:

Just look at the payment transaction. I am only working towards making payment transaction good, since the other two are replics of the Payment.

The navigation Button is too much to the left and i can’t make it like i pretend.
And the Date Value , “Date: 1 of April of 2017” only displays “Date: 1 of April”.


#2

Make the columns * 50 - <GridLayout rows="auto auto auto" columns="* 50"> and text-align the button with a center - that way you will have a grid with 2 columns, the second column taking only 50dip, and the first one all the other available space. Centering the > label will put it in the middle of the 50 available pixels, so it doesn’t ‘hug’ the edges of the white rectangle the way it does now.


#3

It worked perfectly @Pete.K! Thank you.

Just one more thing, i am now producing the release .apk of my project and i am trying in several android cellphones and it addapts most of the items but some it doesnt.

How do i transform the marginTop=“50”, marginLeft=“20” etc… into %?

Regards


#4

Did you try appending the %? I think it is supported as of 3.0, but that’s a maybe, and I don’t know for sure :smiley: Sorry.


#5

Nope i didn’t went throught % support. i just made my components fit in screen no matter what the operative system was. I made universal components.