How to scrollable list + fixed input & buttons on bottom? (chat screen)

ionic-v1
1

How do I make a view so that it has normal header and normal tabs at bottom, but with following content:

  1. a DIV fixed to top (right below the nav), but this can be visible or hidden
  2. a scrollable list (ion-list)
  3. a DIV fixed to bottom (right above the tabs) containing button, input (which fills the available width minus the buttons), and button again

in essence it’s a chat screen normally used by WhatsApp, Hangouts, etc.

I’ve been trying to do this but both the list and DIV are scrollable. I’d like the DIV to be fixed.

Thank you.

2

Put your bottom fixed div out of <ion-content>, then set its absolute position.

<ion-view>
    <ion-content>
    ...
   </ion-content>
   <div class="customexxxxx-btn">
        <a href="javascript:;" class="button btn-normal button-calm">
              Submit
        </a>
    </div>
</ion-view>
3

Why not use an Ionic subheader and footer?


4

@Calendee I tried doing this:

<ion-view title="'Ask'">
  <ion-content has-header="true" has-tabs="true">

    <ion-list>

      <ion-item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
        <h3>{{pet.title}}</h3>
        <p>{{pet.description}}</p>
      </ion-item>
      
    </ion-list>

    <div class="item item-input input-inset">
      <input type="text" value="hallo">
      <button class="button button-small">Send</button>
    </div>    

    <div class="bar bar-footer bar-balanced">
      <div class="title">Footer</div>
    </div>
  </ion-content>
  
  <div class="bar bar-footer bar-balanced">
    <div class="title">Footer</div>
  </div>

</ion-view>

the first footer inside ion-content is visible but is still scrollable.

the second footer outside ion-content is nowhere to be seen.

5

THANK YOU! Your technique works (with a quirk below)

<ion-view title="'Ask'">
  <ion-content has-header="true" has-tabs="true" style="background: #ffe; margin-bottom: 2em">

    <ion-list>

      <ion-item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
        <h3>{{pet.title}}</h3>
        <p>{{pet.description}}</p>
      </ion-item>
      
    </ion-list>

    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>Some filler paragraph to test scrolling boundaries</p>
    <p>LAST PARAGRAPH. MUST BE VISIBLE</p>

  </ion-content>
  
  <div class="bar bar-footer bar-balanced" style="position: fixed; bottom: 3.5em;">
    <div class="item item-input input-inset">
      <input type="text" value="hallo">
      <button class="button button-small">Send</button>
    </div>    
  </div>

</ion-view>

While it works… The problem is I need to approximate 3.2em and 3.5em. This probably will be broken with different layout/device etc.

illustration:

Any idea to make it more robust?