Question about layout in general that I can't seem to figure out


#1

So I understand how to use all the various layouts but what I don’t understand is how to get everything in the right view. For example I want two buttons next to each other to appear at the bottom of the screen. I can hardcode some % using absolute to achieve this and it looks great in emulation but when I port it to different devices it goes outside the view and generally doesn’t display correctly.

Am I misusing the absolute layout? How do I make the bottom position dynamic on all devices? Is this based on screen resolution? Is there no way to make it “responsive” like how you do on the web?

What is the proper way to make two buttons appear on the bottom and adjusting them for different resolutions? Thanks.


#2

You could use grid layout:

<GridLayout columns="*, *" rows="*">
   <Button col="0" row="0" horizontalalignment="center" text="Button One"></Button>
   <Button col="1" row="0" horizontalalignment="center" text="Button Two"></Button>
</GridLayout>

That should work.


#3

Hi, thanks but I have tried that, it doesn’t fix position the button to the bottom of the screen. Instead what it does is it expands the height of the button to fill the entire space.


#4

Try this:

    <GridLayout columns="*, *" rows="*, auto" verticalalignment="bottom">
        <button col="0" row="1" text="Take Picture" class="btn" (tap)="takePicture()"></button>
        <button col="1" row="1" text="Take Picture" class="btn" (tap)="takePicture()"></button>
    </GridLayout>

#5

Yes, I’ve tried applying verticalAlignment=“bottom” before too. It doesn’t seem to understand it. They always just float to the top.

Only way I can push them down is applying height=“500” or something to the StackLayout on top so it manually pushes it down, but that’s a hardcoded way and it doesn’t work once I transfer it on to devices.

Should I be using DockLayerout as the wrapper and then just apply GridLayout inside it and tagging it with dock=bottom?


#6

The key is the “rows=”*, auto" and then putting both buttons in the second row. That way the buttons rows height is as needed and the first row, which is empty in the example fills the rest of the screen.

Regarding using DockLayout, I haven’t used it as of yet so I don’t have a good answer. It may well be the best way, or worst, and I wouldn’t know! :slight_smile:


#7

Yea I understand that logic, but if I only have 4 rows it will never reach the bottom. This was what I ended up doing and it seems to work in all screen sizes and orientation.

<DockLayout height="100%" style.backgroundColor="lightgray" stretchLastChild="false">
    <Label text="top" dock="top" height="60" backgroundColor="green"/>  
  <GridLayout columns="1*, *" rows="auto" dock="bottom" height="60" style.backgroundColor="white" >
    <button text="Label 1" col="0" row="0" height="60" backgroundColor="red"/>
    <button text="Label 2" col="1" row="0" height="60" backgroundColor="green"/>  
  </GridLayout>  
  </DockLayout>

#8

The example I gave works for me. But if the DockLayout works use it!! And yes, it will reach the bottom because row=“0” is non-existent, but takes up all of the screen the button row doesn’t need thus pushing it to the bottom.


#9

I’ll try that again. That’s so strange… appreciate your help though!


#10

Happy to help! Try copy and pasting my code once.


#11

I think SP1966 meant you should use: [quote=“SP1966, post:6, topic:1505”]
“rows=”*, auto"
[/quote]

Small but important difference.

Hope this helps :slight_smile: