Header + Content + Footer. How to add bottom fixed form?

ionic-v1
1

Hi everyone!

I started to work with ionicframework two weeks ago and I have to say that I really like it. However, there is something that I don’t quite understand…

Is there an easy way to add fixed form containing a text field and a button just above the footer and below the content, acting a bit as a footer bar (such as google+ app or facebook messenger)?

Thanks in advance for your replies,

Jon

1 Like
2

Hi,

I tried something but I wanted to know if there is easier/better way.
Basically, I added a sub-footer:

    <div class="bar bar-subfooter">
        <div class="list">
          <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <textarea placeholder="Comments"></textarea>
            </label>
            <button class="button button-small button-positive">
              Send
            </button>
          </div>
        </div>
      </div>

And I used the following css:

.subfooter-area .bar-subfooter {
    bottom: 81px !important; /* place bar-subfooter above footer */
}

.subfooter-area .has-tabs {
    bottom: 119px !important; /* place content end before sub-footer */
}

Note that subfooter-area is a class that I added to the container of the new form area. Full code is viewable here: http://cdpn.io/ijlvD

If you have any advises, please share.

Thanks,

Jon

1 Like