Topic: MDBTabContent tag operates incorrectly with css classes
MDBTabNav
<MDBTabNav
col="4"
class="class-goes-here"
tabsClasses="tabs-classes-goes-here"
>
Actual behavior
<div class="col-4 class-goes-here">
<ul class="nav nav-tabs flex-column tabs-classes-goes-here">
MDBTabContent
<MDBTabContent
col="6"
class="class-goes-here"
contentClasses="content-classes-goes-here"
>
Expected behavior
<div class="col-6 class-goes-here">
<div class="tab-content content-classes-goes-here">
Actual behavior
<div class="col-6">
<div class="tab-content content-classes-goes-here class-goes-here">
Hi, tabsClasses and content Classes work as intended. However, we will look at the possibility of deeper editing of individual Tabs (and Tabs content) elements.
G_D priority commented 10 months ago
The issue is actually where "class" is placed. It's incorrect on MDBTabContent...
Mateusz Trochonowicz staff commented 10 months ago
Oh, you are right. We see this case in vertical tabs but we need to discuss how to approach this. Unfortunately there is no ETA for this.
G_D priority commented 10 months ago
No worries; i'd imagine you should just make it consistent with the behaviour of MDBTabNav? As it is, one is unable to override the resulting col-x class rendered for Content - whereas for Nav, you can add your own col-md-x, col-lg-y, col-xl-z (or anything else)
G_D priority commented 10 months ago
For anyone else reading this, in the meantime I set
MDBTabContent col="0"
and then create a class definition;
.col-0 { flex: 1 0 0%;}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 6.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes