Mdb Angular Tab in old style rendering

Topic: Mdb Angular Tab in old style rendering

saganesa free asked 4 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.

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

<p>Did i understand correctly - you want to remove spacing between tabs in <code>mdb-tabset</code>?</p>

<pre class="prettyprint"><code>
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
  
  <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>
  
  <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>
  
  <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>
</code></pre>

<p><strong>styles.scss</strong></p>

<pre class="prettyprint"><code>.md-tabs .nav-item {
  flex-grow: unset !important;
}
</code></pre>

<p>We do not have styles for old style tabs, like in an image example. You can try to overwrite them by yourself. </p>

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

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: 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

saganesa

20Support score
4Questions 0Answers 0Snippets