Hi there, is it possible put a tabbar to the middle of a page (not to top or bottom toolbar)?
I’m on F7-vue 3.1.1.
Thanks in advance,
Bálint
Hi there, is it possible put a tabbar to the middle of a page (not to top or bottom toolbar)?
I’m on F7-vue 3.1.1.
Thanks in advance,
Bálint
Hi, you can try with css:
.toolbar.tabbar-labels {
position: absolute;
width: 100%;
top: 50% !important;
left: 50%;
transform: translate(-50%, -50%);
}
Result:
jsfiddle
Hi, thanks this definitely places the toolbar to the middle of the page and also shows that my question was far not clear enough.
To put it in another way: I’d like to place the tabbar after some content block (not necessarily to the middle of the page), like this:
<f7-navbar>
<f7-nav-left back-link></f7-nav-left>
<f7-nav-title>Page title</f7-nav-title>
</f7-navbar>
<f7-block>
...
</f7-block>
<f7-block>
...
</f7-block>
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link tab-link-active button">Tab1</a>
<a href="#tab2" class="tab-link button">Tab2</a>
<a href="#tab3" class="tab-link button">Tab3</a>
</div>
</div>
<div class="tabs">
...
</div>
Sorry, false alert. I’ve just screwed up the corresponding css.
After correcting it all works as expected.
Thanks for your help,
Bálint