Hello! I am developing a simple movie app while learning the F7. I have a certain layout that I’d like to achieve using tabbar or toolbar.
The layout is the tabbar as “part of the page” not a bottom toolbar or subnavbar.
I removed the “toolbar-top” /"-bottom" as per vlad’s suggestion. It worked but
there is one problem.
Here is the screenshot:
The problem is: the blue line that tells which tab is active, is overlapping the text.
Here are my codes:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<!-- Links have "tab-link" class instead of just "link" to switch tabs -->
<a href="#tab-1" class="tab-link tab-link-active">Episodes</a>
<a href="#tab-2" class="tab-link">Trailer</a>
<a href="#tab-3" class="tab-link">About</a>
</div>
</div>
<!-- Tabs -->
<div class="tabs">
<!-- First tab, active -->
<div class=" tab tab-active" id="tab-1">
<div class="block">
<p><b>Tab 1 content</b></p>
</div>
</div>
<!-- Second tab -->
<div class=" tab" id="tab-2">
<div class="block">
<p><b>Tab 2 content</b></p>
...
</div>
</div>
<!-- Third tab -->
<div class=" tab" id="tab-3">
<div class="block">
<p><b>Tab 3 content</b></p>
...
</div>
</div>
</div>
</div>
</div>
Am I missing something? or It is an issue that f7 hasn’t encountered yet?
Hope anyone can solve this. Thank you!
-Sean