https://ibb.co/wL8TR0T
I use scrollable tabs https://preview.keenthemes.com/html/metronic/docs/base/tabs#scrollable-tabs in the card header but it generates a vertical scroll as well although unnecessary. How can I prevent it?
<div class="card-header border-0 pt-6">
<!--begin::Card toolbar-->
<div class="mb-5 hover-scroll-x">
<div class="d-grid">
<ul class="nav nav-tabs nav-line-tabs flex-nowrap text-nowrap">
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
</div>
</div>
</div>
Hi,
Please try to below and it should work:
<div class="card">
<div class="card-header border-0 pt-6">
<div class="mb-5 hover-scroll-x">
<div class="d-grid">
<ul class="nav nav-tabs nav-line-tabs flex-nowrap text-nowrap">
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>
</div>
</div>
</div>
<div class="card-body">
Card body
</div>
</div>