Tabbar placement

Questions
1

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

1 Like
2

Hi, you can try with css:

.toolbar.tabbar-labels {
  position: absolute;
  width: 100%;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}

Result:
jsfiddle

1 Like
3

Hi, thanks this definitely places the toolbar to the middle of the page and also shows that my question was far not clear enough. :slight_smile:
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>
4

Sorry, false alert. I’ve just screwed up the corresponding css.
After correcting it all works as expected.

Thanks for your help,
Bálint

1 Like