mdb-tabset: transform to uppercase, height of tabset-header

Topic: mdb-tabset: transform to uppercase, height of tabset-header

markusruderman free asked 4 years ago

Expected behavior

I am using mdb-tabset, Classic tabs version, exactly in the same way it is described here: https://mdbootstrap.com/docs/angular/components/tabs/#classic-tabs

I would like to:

a. prevent transformation of e.g. "Profile" in mdb-tab heading="Profile" to uppercase letters PROFILE

b. resize the mdb-tab - header (having less padding above and beneath text), so that the header comes with overall less height.

Actual behavior

a. Heading texts get transformed to uppercase letters

b. I've found no way to style the height of mdb-tab - header via scss-classes.

Resources (screenshots, code snippets etc.)

Add comment

markusruderman free answered 4 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi Konrad,

I have good news: In addition to the code I provided in my last post I want to inform you that the code you provided is also working when I add !important to both lines and do the definition in style.scss.

.classic-tabs .nav li a {
text-transform: none !important;
padding: 10px !important; }

Second thing: if I apply a custom class (my-tabs) to mdb-tabset - component and add this custom class as a qualifier to css code we are able to style a specific tabset and can omit !important.

<mdb-tabset [buttonClass]="'classic-tabs tabs-cyan'" 
[contentClass]="'card'" class="my-tabs classic-tabs">

.my-tabs.classic-tabs .nav li a { 
text-transform: none; 
padding: 10px; }

Thanks a lot for supporting us!

Markus

Konrad Stępień staff commented 4 years ago

I am very happy that the problem has been fixed.

Add comment

markusruderman free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Konrad,

I put the SCSS code you provided into file styles.scss - BUT also did NOT work as expected.

BUT: I added this code shown below and it changed the rendering of the tabset header.

At the moment I am unsure, if this definition has not got any side effects for other elements based on nav-link outside of tabset header. Is there a more specific qualification to style exactly one tabset header, like styling via a .custom-class?

a.nav-link.waves-light.ng-star-inserted {
text-transform: none;
padding: 8px 20px;
font-size: 1.0rem;  }
a.nav-link.waves-light.active.ng-star-inserted {
text-transform: none;
padding: 8px 20px;
font-size: 1.0rem; }

Add comment

Konrad Stępień staff answered 4 years ago

0 0 Best answer

Hi @markusruderman,

Can you provide the code below for your file styles.scss?

.classic-tabs .nav li a {
    text-transform: none;
    padding: 10px;
}

markusruderman free commented 4 years ago

Hi Konrad,

thanks a lot - but I am sorry to tell you that the CSS code you provided does NOT work.

What I did was quite simple: I copied example HTML code from here: https://mdbootstrap.com/docs/angular/components/tabs/#classic-tabs to app.component.html.

I added CSS code of your answer to app.component.sccs.

But rendering of tabs did NOT change.

Have you tried it yourself?

Konrad Stępień staff commented 4 years ago

Hi @markusruderman,

Please visit this page:

https://mdbootstrap.com/support/angular/is-it-possible-to-remove-the-top-navigation-buttons-of-the-mdb-card-carousel/

There I explained how styles work. You have to provide these styles for file styles.scss because this file are a global file of styles. And if you wand override styles you need use to this file.

Please tell me if you have still a problem.

Please insert min. 15 characters.

markusruderman free commented 4 years ago

Hi Konrad, I added some comment concerning your answer yesterday. But I did not do it in this box, but created an answer - can you please take a look at it. Thanks a lot.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 9.3.0
Device: PC
Browser: Chrome
OS: Windows 7
Provided sample code: No
Provided link: Yes

markusruderman

44Support score
4Questions 2Answers 0Snippets