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')
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 http://framework7.io/docs/messagebar.html#messagebar-layout
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