Am trying to create tabs within a tab. Everything seems fine, except an issue on the appearance of the active inner tab.
The highlighting line of the “active” tab appears to be striking through between the icon and the label, instead of appearing at the bottom of the label.
This is the code that creates the inner tabbar in the home.f7.html file.
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title slidingx">Sauti Café</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="toolbar tabbar-top tabbar-labels">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="icon f7-icons if-not-md">home_fill</i>
<i class="icon material-icons if-md">person_outline</i>
<span class="tabbar-label">Artists</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="icon f7-icons if-not-md">list_fill</i>
<i class="icon material-icons if-md">library_music</i>
<span class="tabbar-label">Music</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="icon f7-icons if-not-md">settings_fill</i>
<i class="icon material-icons if-md">trending_up</i>
<span class="tabbar-label">Trending</span>
</a>
</div>
</div>
<div class="tabs-swipeable-wrap">
...
Am using F7 v4.4.0/webpack.
Where could the issue be?