Dropdown automatically changes to grey and white in transparent navbar about mdb-angular-ui-kit

[Bloodcast69]

Puria Rad,
Now I see where's the problem is. We've fixed this in 5.1.0 update. That's Bootstrap fault. For a quick workaround, please head into /src/scss/bootstrap/_reboot.scss file, and change line 359 from -webkit-appearance: button to -webkit-appearance: none .

We think how to repair this problem in our styles.
Best Regards,
Damian

[Peperud]

@mdbootstrap
Do you render the Angular docs/samples with Angular? I'm guessing not...

[Bloodcast69]

Hello PuriaRad,
I tried to reproduce your case, but for me, everything is working fine. I've got transparent navbar with your dropdown code, and dropdown button acts like he should.
We have fixed this problem few updates ago, like in 5.1.0 or 5.1.1. Which version of MDB do you have? If not latest, please update your MDB.

I'm pasting here the code of my working navbar. You can copy it and test in your project.

<header>         
  <mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" [containerInside]="false">
      <logo>
          <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
      </logo>
      <links>
          <ul class="navbar-nav mr-auto">
              <li class="nav-item dropdown" dropdown>
                  <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                  Basic dropdown<span class="caret"></span></a>
                  <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                      <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
                      <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
                      <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
                      <div class="divider dropdown-divider"></div>
                      <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
                  </div>
              </li>
              <li class="nav-item active waves-light" mdbRippleRadius>
                  <a class="nav-link">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item waves-light" mdbRippleRadius>
                  <a class="nav-link">Link</a>
              </li>
              <li class="nav-item waves-light" mdbRippleRadius>
                  <a class="nav-link">Profile</a>
              </li>
          </ul>
      </links>
  </mdb-navbar>
  <!-- Main -->
  <div class="view intro hm-purple-light" style="">
      <div class="full-bg-img flex-center">
          <div class="container text-center white-text wow fadeInUp">
              <h2>This Navbar is fixed and transparent</h2>
              <br>
              <h5>It will always stay visible on the top, even when you scroll down</h5>
              <p>Navbar's background will switch from transparent to solid color while scrolling down</p>
              <br>
              <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
          </div>
      </div>
  </div>
  <!-- /.Main -->
</header>     
<!--Main Navigation-->

<!--Main Layout-->
<main class="text-center py-5">

  <div class="container">
      <div class="row">
          <div class="col-md-12">

              <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          </div>
      </div>
  </div>

</main>
<!--Main Layout-->

Best Regards,
Damian

[PuriaRad]

Thank you for your response @Bloodcast69

I tested your code on my project and on the tutorial file which I downloaded from MDB tutorial
none of them worked correctly and still have the problem.
I followed the steps in the tutorial one by one and still don't know what I'm missing.
I checked every scss file in the src folder and clear them all but didn't help.

I'm using

node v8.9.3,
npm v5.6.0

and this is my package.json:

{
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project from an angular.io guide.",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e",
    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:universal": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/compiler-cli": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/platform-server": "^5.0.5",
    "@angular/router": "~5.0.0",
    "@angular/upgrade": "~5.0.0",
    "@nguniversal/express-engine": "^5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "angular-bootstrap-md": "^5.2.0",
    "angular-in-memory-web-api": "~0.5.0",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.0",
    "ts-loader": "^3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@types/jasmine": "~2.8.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^6.0.45",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "lodash": "^4.16.2",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.1.0",
    "ts-node": "^3.3.0",
    "tslint": "^3.15.1",
    "typescript": "2.4.2"
  },
  "repository": {}
}

Thank you !
Puria Rad

[PuriaRad]

@Bloodcast69 Thanks !
It worked perfectly.