How to fix message bar at bottom?

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 ?

        .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)
'#', data-sheet=".richMessaging-sheet")
            i.icon.f7-icons.ios-only more_vert_fill
            textarea(v-model='message', :placeholder="$t('MESSAGE_PLACEHOLDER')")
'#', @click='sendMessage()')
            i.icon.f7-icons.ios-only more_vert_fill

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 ?

It must be before page-content

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

Please follow messagebar docs about its layout and placement in page structure

1 Like

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

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

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