Topic: Mdb Angular Tab in old style rendering
Hi There, Apologies for being naive here. Is it possible to override style of MdbAngular Pro mdb-tab to look like like this? https://www.htmlvalidator.com/2018/docs/batch-wizard-target-list-options.png I meant the spacing. or is it possible to apply global style to tweak the spacing for elements in mdbpro?
I know it is kind of falling back to old style. Just asking! As our client prefers this style of rendering.
Thank you.
Hi!
Did i understand correctly - you want to remove spacing between tabs in mdb-tabset?
If so, try this:
<!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
<!--Panel 1-->
<mdb-tab heading="Profile">
<div class="row">
<div class="col-12">
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
Tempora, placeat ratione porro voluptate odit minima.
</p>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tab heading="Follow">
<div class="row">
<div class="col-12">
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
Tempora, placeat ratione porro voluptate odit minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
Tempora, placeat ratione porro voluptate odit minima.
</p>
</div>
</div>
</mdb-tab>
<!--Panel 3-->
<mdb-tab heading="Contact">
<div class="row">
<div class="col-12">
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
Tempora, placeat ratione porro voluptate odit minima.
</p>
</div>
</div>
</mdb-tab>
</mdb-tabset>
styles.scss
.md-tabs .nav-item {
flex-grow: unset !important;
}
We do not have styles for old style tabs, like in an image example. You can try to overwrite them by yourself.
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.4.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes