How to size a list

ionic-v1
1

image
image782×1294 22.3 KB

I want the scroll view to sit above the bottom button bar. Right now the scrollview goes the entire view. I don’t want the bottom button bar to be in the footer because it needs to be bigger.

How do I split the content into two separate views? so that the list and the button bar do not overlap each other?

here is the html

<body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-positive">
        <h1 class="title"></h1>
      </ion-header-bar>
      <ion-header-bar class="bar-subheader">
        <div class="list">
          <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Where are you?">
          </label>
        </div>
      </ion-header-bar>
        <ion-content>
          <div class="list has-subheader has-footer padding-bottom">
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
            <li class="item">
              hello
            </li>
          </div>
        </ion-content>
      <div class ="button-bar alignBottom">
        <button class="icon_custom icon-center ion-ios-videocam button button-positive largeButton"></button>
        <button class="icon_custom icon-center ion-camera button button-positive largeButton"></button>
      </div>
    </ion-pane>
  </body>