Mdb Angular Tab in old style rendering


Topic: Mdb Angular Tab in old style rendering

saganesa asked 2 years ago

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.


Bartosz Termena staff answered 2 years ago

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.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • 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