Topic: Classic tabs breaks mdb-select
When putting a mdb-select within classic tabs, the mdb-select does not work. The first item has crazy margin due to the
@media (min-width: 62em)
.classic-tabs li:first-child {
margin-left: 56px;
}
CSS and the dropdown doesn't open all the way.
Add comment
Dear id90travel,
Please head into scss/angular/pro/_tabs.scss and comment line 48 (.classic-tabs overflow-y: hidden),
then head into scss/mdb/pro/_tabs.scss and replace .classic-tabs code with this from below:
.classic-tabs {
@include flexbox();
white-space: normal;
border-radius: 0.3rem 0.3rem00;
@media (min-width: 62rem) {
}
li {
@include flex(1 0 30%);
@media (min-width: 62em) {
flex:inherit;
}
a {
display: block;
padding: $classic-tabs-padding-y $classic-tabs-padding-x;
font-size: $classic-tabs-font-size;
text-transform: uppercase;
color: $classic-tabs-color;
text-align: center;
border-radius: 0;
&.active {
border-bottom: 3pxsolid;
color: $white;
}
}
}
@media (min-width: 62em) {
li.nav-item:first-of-type {
margin-left: 56px;
}
}
@each $name,
$color in $ctbc {
&.#{$name} {
li {
a {
&.active {
border-color: $color;
}
}
}
}
}
}
This fix will be included in next release.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags