How to create fixed button to the bottom of the page in Zebble for Xamarin?

Question

I need to create two buttons in the bottom of the page with a list view. So I create two stacks in the body of the page and put listview and buttons to them like below:

<z-place inside="Body">
   <Stack Direction="Vertical">
      <Stack Id="top">

  </Stack>
  <Stack Id="bottomMenu" Direction="Horizontal">
    <Button Text="Btn1" CssClass="btmButton1"></Button>
    <Button Text="Btn2" CssClass="btmButton2"></Button>
  </Stack>
 </Stack>
</z-place>

And the stylesheet like this:

//Android.scss

.btmButton1 {
    background: linear-gradient(to bottom, #039795, #196e6d);
    color: #ffffff;
    height: 52px;
    margin: 0;
    border-radius: 0;
}

.btmButton2 {
    background: linear-gradient(to bottom, #5c0eb3, #3f1968);
    color: #ffffff;
    height: 52px;
    margin: 0;
    border-radius: 0;
}

#top {
    height: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
    background: #dadada
}

#bottomMenu {
    width: calc("Zebble.Device.Screen.Width");
    margin-top: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
    position: fixed;
}

But, when I set the #top height buttons was hidden.

What template are you using for this page? – ctyar Apr 24 '17 at 14:51 — ctyar, Apr 24 '17 at 14:51

score 2 · Accepted Answer · answered Apr 21 '17 at 18:17

To make button bar on the bottom of navigation bar page, you can use this css role in common.scss for all platforms.

.btmButton1 {
background: linear-gradient(to bottom, #039795, #196e6d);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}

.btmButton2 {
background: linear-gradient(to bottom, #5c0eb3, #3f1968);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}

#top {
height: calc("(Zebble.Device.Screen.Height - 116)");
background: #dadada
}

#bottomMenu {
width: calc("Zebble.Device.Screen.Width");
height:52px;
}

And your body of main page view code is:

  <z-place inside="Body">
    <Stack Direction="Vertical">

      <Modules.ContactsList Id="top" />

     <Stack Id="bottomMenu" Direction="Horizontal">
      <Button Text="Btn1" CssClass="btmButton1"></Button>
      <Button Text="Btn2" CssClass="btmButton2"></Button>
    </Stack>
  </Stack>
 </z-place>

There is a notice in above code which is the list view, in list view, you should use scroll view that you able to scroll your list up and down.

How to create fixed button to the bottom of the page in Zebble for Xamarin?

1 Answers1