Topic: Tabs does not look like in the documentation

Kangee pro asked 6 years ago


i copied the code (the secound example) fromhttps://mdbootstrap.com/angular/components/tabs/ in a blank component but the tabs header are tiny and the font color of the unselected tab header are black and not white

Kangee pro answered 6 years ago


The result look like this

https://drive.google.com/open?id=1mJY9T8VRTkIKCUnc8qk9oY49c7wposVg

maybe I forgot an enclosing element?

package.json

{
"name": "quickstart-angular5",
"version": "5.1.2",
"license": "custom",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
"pre-commit": "ng lint"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "5.0.0 - 5.2.1",
"@angular/common": "5.0.0 - 5.2.1",
"@angular/compiler": "5.0.0 - 5.2.1",
"@angular/core": "5.0.0 - 5.2.1",
"@angular/forms": "5.0.0 - 5.2.1",
"@angular/http": "5.0.0 - 5.2.1",
"@angular/platform-browser": "5.0.0 - 5.2.1",
"@angular/platform-browser-dynamic": "5.0.0 - 5.2.1",
"@angular/router": "5.0.0 - 5.2.1",
"angular2-uuid": "^1.1.1",
"chart.js": "2.5.x",
"classlist.js": "1.1.x",
"core-js": "2.4.x",
"del": "3.0.x",
"easy-pie-chart": "2.1.x",
"font-awesome": "4.7.x",
"gulp": "^3.9.1",
"gulp-rename": "1.2.x",
"gulp-run": "1.7.x",
"hammerjs": "2.0.x",
"ng-html-util": "1.0.x",
"ngm-cli": "0.5.x",
"rxjs": "^5.5.2",
"screenfull": "3.3.x",
"smoothscroll-polyfill": "0.3.x",
"web-animations-js": "2.3.x",
"zone.js": "0.8.x"
},
"devDependencies": {
"@angular/cli": "1.5.0 - 1.6.5",
"@angular/compiler-cli": "5.0.0 - 5.2.1",
"@angular/language-service": "5.0.0 - 5.2.1",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.85",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.5.0",
"webpack": "3.x"
}
}

 

component.html:

<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-3 indigo'" [contentClass]="''">
<!--Panel 1-->
<mdb-tabheading="<i class='fa fa-user'></i> Profile">
<divclass="row">
<divclass="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-tabheading="<i class='fa fa-heart'></i> Follow">
<divclass="row">
<divclass="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-tabheading="<i class='fa fa-envelope'></i> Mail">
<divclass="row">
<divclass="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>


Damian Gemza staff commented 6 years ago

Your code works fine on me. Do you use pro or free MDB? Please note, that tabs component is available only in PRO version. Please upgrade your MDB to latest 5.2.0, and try one more time. Best Regards, Damian

Damian Gemza staff answered 6 years ago


Hello Kangee, For me, everything is working fine. Please check your browser console - maybe there's some errors? Please paste me here your package.json file and code of your tabs. Best Regards, Damian

Please insert min. 20 characters.

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags