CODEWITHSUNDEEP
javascriptcsslisttoolbaronsen-ui
smartmouse
smartmouse

Reputation: 14404

Onsen items list at the bottom of the screen

I am using Onsen framework for developing a mobile app. I'm trying to add a bottom menu but it doesn't work. I tried to use code that i get from here and here:

  <ons-bottom-toolbar class="bottom-toolbar">
    <ons-list>
      <ons-list-item modifier="tappable">
        ciao
      </ons-list-item>
      <ons-list-item modifier="tappable">
        ciao
      </ons-list-item>
    </ons-list>
  </ons-bottom-toolbar>

But the result is weird:

enter image description here

Do you know what could be the problem?

Upvotes: 1

Views: 141

Answers (1)

Ilia Yatchev
Ilia Yatchev

Reputation: 1262

The bottom toolbar wasn't meant for having a whole list of items rather just one line things. It's meant to always be visible so it's expected to not be very big.

If you just want to have the items on the bottom it's going to be easier with a little css.

.bottom {
  position: absolute;
  left:0;
  right:0;
  bottom:0;
}

Demo

Upvotes: 3

Related Questions