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 2 weeks ago
The issue is actually where "class" is placed. It's incorrect on MDBTabContent...
Mateusz Trochonowicz staff commented 2 weeks 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 2 weeks 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 2 weeks 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