How to fix message bar at bottom?

Questions
1

I use message bar chat screen which is inside a tab however it does not fit into screen ,messagebar-area at bottom doesnt seen. I though f7 component automatically makes this , isnt it ? If not how can I make it fix at bottom ?

.tabs
    #tab-1.page-content.tab(:class="tabActiveChat")
      .page-content.messages-content
        .chat-div(v-for='message in filtredMessages', :key='message.timestamp', v-if='renderMessages')
          left-chat-bubble.leftBBl.messageLine(:message='message', v-if='message.sender === conversationId', :contact='selectedContacts[0]')
          right-chat-bubble.rightBBl.messageLine(:message='message', v-else)
      .toolbar.toolbar-bottom-md.messagebar
        .toolbar-inner
          a.link.sheet-open(href='#', data-sheet=".richMessaging-sheet")
            i.icon.f7-icons.ios-only more_vert_fill
            i.icon.material-icons.md-only more_vert
          .messagebar-area
            textarea(v-model='message', :placeholder="$t('MESSAGE_PLACEHOLDER')")
          a.link(href='#', @click='sendMessage()')
            i.icon.f7-icons.ios-only more_vert_fill
            i.icon.material-icons.md-only near_me
        .messagebar-sheet

when I use a fixed height css fixedSize for .page-content.messages-content.fixedSize it works but it changes per screen/pc, how can I fix this problem ?

localhost_8080__(iPhone%206_7_8)%20(5)
localhost_8080__(iPhone 6_7_8) (5).png861×1753 44.9 KB

2

It must be before page-content

3

you mean the fixed css class ? but it doesnt work same in every screen ?

or you mean .messagebar-area ?

If I move the codes after .toolbar.toolbar-bottom-md.messagebar
to before page-content, message bar goes up, under tabs like this

localhost_8080__(iPhone%206_7_8)%20(6)
localhost_8080__(iPhone 6_7_8) (6).png861×1753 48.1 KB

4

Please follow messagebar docs about its layout and placement in page structure http://framework7.io/docs/messagebar.html#messagebar-layout

1 Like
5

Thanks Vladimir. Actually I was already taken code from that docs but before I thought we are limited to one page tag in a component, and since I place message inside a tab, not under a full page, its second page tag used the component

adding .page solved the problem but this time I lost the functionality, clicking on items at message bar does not produced anything, somehow new .page causes this issue. Doesnt produce any line of logs

I noticed another serious issue that message page and message bar seen in other tabs, it doesnt fade out when I change the tab

6

It is valid statement. It is not allowed to use f7-page inside of f7-page. Only one f7-page tag must be used in single components. Exception only for the case when you have “inline” modals (like popup) that can be inside of page and can contain page as well

7

hmm,meanwhile in another page I noticed that I was used times one at begining and one under a popup and was working for bottom placement but was not giving an error also, when I changed to .page it worked bottom placement for that page

but for this page page still not responding after putting .page