Topic: mdb-tabset: transform to uppercase, height of tabset-header
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.)
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
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; }
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 3 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 3 years ago
Hi @markusruderman,
Please visit this page:
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.
markusruderman free commented 3 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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