dropdown button in toolbar doesn't expand (using your sample example)

Expected behavior

Expect to button to expand

Note: I am using the free version of "angular-bootstrap-md": "6.2.0". I never downloaded the source code but installed it as a dependency directly through stackblitz. Most likely I did something wrong and I am hoping for some guidance from the experts.

Actual behavior

Button has wave effect when clicked but dropdown doesn't expand

Your working environment and MDB version information

The segment below is from package.json dependencies": { "@angular/animations": "6.0.6", "@angular/common": "6.0.6", "@angular/compiler": "6.0.6", "@angular/core": "6.0.6", "@angular/forms": "6.0.6", "@angular/http": "6.0.6", "@angular/platform-browser": "6.0.6", "@angular/platform-browser-dynamic": "6.0.6", "@angular/router": "6.0.6", "@angular/material": "6.3.1", "@angular/cdk": "6.3.1", "@angular/animations": "6.0.6", "core-js": "2.5.7", "rxjs": "6.2.1", "zone.js": "0.8.26", "jasmine-core": "2.99.1", "jasmine-marbles": "0.3.1", "web-animations-js": "2.3.1", "angular-in-memory-web-api": "0.6.0", "rxjs-compat": "6.2.1", "angular-bootstrap-md": "6.2.0", "tslib": "1.9.3", "chart.js": "2.7.2", "hammerjs": "2.0.8", "font-awesome": "4.7.0" },

angular.json has the following

"architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/angular.io-example", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", /* In the assets key under apps, you can include any directory you like that you want angular-cli to treat as static. For example, you can declare a folder called static, and serve up static pages from there.

For v6 applications, assets lives under browser: */ "assets": [ { "glob": "favicon.ico", "input": "src", "output": "/" }, { "glob": "*/", "input": "src/assets", "output": "/assets" }, { "glob": "*/", "input": "src/static_web_pages", "output": "/assets/static_web_pages" } ], "styles": [ { "input": "node_modules/font-awesome/scss/font-awesome.scss" }, { "input": "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss" }, { "input": "node_modules/angular-bootstrap-md/scss/mdb-free.scss" }, { "input": "src/styles.scss" } ], "scripts": [ { "input": "node_modules/chart.js/dist/Chart.js" }, { "input": "node_modules/hammerjs/hammer.min.js" } ] },

Resources (screenshots, code snippets etc.)

        <li class="nav-item dropdown" dropdown>
            <a dropdownToggle mdbWavesEffect type="button" class="nav-link text-dark dropdown-toggle waves-light">
            Basic dropdown<span class="caret"></span></a>
            <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
                <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
                <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
                <div class="divider dropdown-divider"></div>
                <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
            </div>
        </li>

    </ul>
    <!-- Links -->

You can launch my sample code from stackblitz using the following link https://stackblitz.com/github/riyadali/TownOfBabylon

Or even view a deployed version of the site at https://town-babylon-angular.herokuapp.com

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

Could you please provide me with some reproduction example which I'll be able to run and debug the problem? I don't know if your application is working fine on Stackblitz.

My code is here https://github.com/riyadali/TownOfBabylon/

The component in question with the issue is in the src/app folder and it is called tool-bar-scalable. Basically this is just a copy of your basic tool bar demo. But for your reference I've included the relevant selection below. Basically what is happening is that this drop down is not expanding. If I add the "show" option on the dropdownmenu div it displays but ti doesn't toggle when I click on it and remains expanded.

I am not sure if the order of my scss file is causing an issue. But in any case below is what I have in the index.html file On Fri, Jul 27, 2018 at 1:45 AM, Bloodcast69 wrote: > Could you please provide me with some reproduction example which I'll be > able to run and debug the problem? I don't know if your application is > working fine on Stackblitz. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > , > or mute the thread > > . >

@riyadali I tried to reproduce your app but I've encountered other problem. After npm install and ng serve console throws me below error. What should I do now?

Provided host 10.1.2.3 could NOT be bound. Please provide a different host address or hostname
Error: Provided host 10.1.2.3 could NOT be bound. Please provide a different host address or hostname
    at /home/damian/Desktop/Testy/town/node_modules/portfinder/lib/portfinder.js:139:27
    at /home/damian/Desktop/Testy/town/node_modules/portfinder/node_modules/async/lib/async.js:52:16
    at /home/damian/Desktop/Testy/town/node_modules/portfinder/node_modules/async/lib/async.js:264:21
    at /home/damian/Desktop/Testy/town/node_modules/portfinder/node_modules/async/lib/async.js:44:16
    at /home/damian/Desktop/Testy/town/node_modules/portfinder/lib/portfinder.js:117:16
    at Server.onError (/home/damian/Desktop/Testy/town/node_modules/portfinder/lib/portfinder.js:54:14)
    at Object.onceWrapper (events.js:217:13)
    at Server.emit (events.js:125:13)
    at emitErrorNT (net.js:1373:8)
    at process._tickCallback (internal/process/next_tick.js:152:19)

I'm not sure if this is the same issue. But I encountered something similar when I tried to launch a "production" version of the site to heroku. For some reason it was trying to bind to localhost and I needed to override it by specifying a host on the ng serve command. Below is the appropriate segment from the package json file. Since you are launching locally maybe edit the package json and remove the "--host" and "--disable-host-check" option and just do a plain ng serve. To test locally I used stackblitz (so I don't know if the override the ng serve in their processing)

Refer to the following links for an understanding of this ng serve issue https://stackoverflow.com/questions/50594601/deploying-mean-stack-app-to-heroku https://stackoverflow.com/questions/43677629/invalid-host-header-when-running-angular-cli-development-server-c9-io (for the disable-host-check) "scripts": { "ng": "ng", "start": "ng serve --host 0.0.0.0 --disable-host-check", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

On Mon, Jul 30, 2018 at 3:58 AM, Bloodcast69 notifications@github.com wrote:

@riyadali https://github.com/riyadali I tried to reproduce your app but I've encountered other problem. After npm install and ng serve console throws me below error. What should I do now?

Provided host 10.1.2.3 could NOT be bound. Please provide a different host address or hostname Error: Provided host 10.1.2.3 could NOT be bound. Please provide a different host address or hostname at /home/damian/Desktop/Testy/town/node_modules/portfinder/lib/portfinder.js:139:27 at /home/damian/Desktop/Testy/town/node_modules/portfinder/node_modules/async/lib/async.js:52:16 at /home/damian/Desktop/Testy/town/node_modules/portfinder/node_modules/async/lib/async.js:264:21 at /home/damian/Desktop/Testy/town/node_modules/portfinder/node_modules/async/lib/async.js:44:16 at /home/damian/Desktop/Testy/town/node_modules/portfinder/lib/portfinder.js:117:16 at Server.onError (/home/damian/Desktop/Testy/town/node_modules/portfinder/lib/portfinder.js:54:14) at Object.onceWrapper (events.js:217:13) at Server.emit (events.js:125:13) at emitErrorNT (net.js:1373:8) at process._tickCallback (internal/process/next_tick.js:152:19)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/issues/87#issuecomment-408779492, or mute the thread https://github.com/notifications/unsubscribe-auth/AUQvFU8SarNzVXls0ZzmbmGTGfVNbSBQks5uLryygaJpZM4VZtW_ .

@riyadali I guessed this solution, but I had to check it. In the .angular-cli.json file, you do not import styles that are used in angular-bootstrap-md library. The solution will be to add the following code to the style array in the .angular-cli.json file.

"styles": [
   "../node_modules/font-awesome/scss/font-awesome.scss",
   "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
   "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
   "styles.scss"
],

Ok you may be on to the source of the problem. However, since this is an angular 6 app I thought that the angular-cli.json file is deprecated in favor of the angular.json file. I decided to rename the angular-cli.json file, but Stackblitz complained indicating that it can only build projects based on angular-cli. I then tried to included the styles in angular-cli as you indicated but ran into problems with font-awesome.

Below is the configuration used in angular-cli.json (as you suggested but which resulted in the font-awesome problems)

"styles": [ "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", "../node_modules/angular-bootstrap-md/scss/mdb-free.scss", "styles.scss" ], "scripts": [ "../node_modules/chart.js/dist/Chart.js", "../node_modules/hammerjs/hammer.min.js" ],

Here is my index.html external references (notice font-awesome is included)

Town of Babylon

And this is the complaint I received (indicating that the font-awesome stuff is missing) Can't find modules: font-awesome/scss/variables (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/mixins (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/path (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/core (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/larger (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/fixed-width (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/list (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/bordered-pulled (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/animated (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/rotated-flipped (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/stacked (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/icons (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/) font-awesome/scss/screen-reader (@4.7.0 https://unpkg.com/font-awesome@4.7.0/scss/)

The strange thing is that when I have the styles as an empty array in the .angular-cli.json file, the app loads successfully in Stackblitz. I suppose that it is using the configuration from the angular.json file (relevant parts included below)

"architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/angular.io-example", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", ... "styles": [ "node_modules/font-awesome/scss/font-awesome.scss", "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", "node_modules/angular-bootstrap-md/scss/mdb-free.scss", "src/styles.scss" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/hammerjs/hammer.min.js" ] }, "configurations": { ...

In summary below are my findings. (Please note that I am relatively new to the typescript version of Angular and using the Angular configuration file. So bear with me if there is something really stupid about this configuration setup that I have.)

1) Though it would appear that angular-cli.json is deprecated and replaced with angular.json, stackblitz requires it. So it is most likely using information from angular-cli.json to setup the development environment.

2) When I specify the styles as suggested in angular-cli.json, I receive a complaint indicating that font-awesome cannot be found though it is specified in the index.html reference

3) One other thing that is a bit different in the angular-cli.json and angular .json is that the root folder used is "src" for angular-cli.json and "" (empty string) for angular.json so all the references in configuration files are a bit different. For example, in angular-cli.json, the reference to the default styles for the app and the node modules are as follows

"../node_modules/angular-bootstrap-md/scss/mdb-free.scss", "styles.scss"

whereas in angular.json the references are just slightly different as shown below

"node_modules/angular-bootstrap-md/scss/mdb-free.scss", "src/styles.scss"

4) I then tried to integrate the scss files into the angular-cli.json config for font-awesome using instructions from this site https://github.com/angular/angular-cli/blob/master/docs/ documentation/stories/include-font-awesome.md but ran into problems.

I guess at this point my question is what is the configuration of your angular-cli.json and angular.json file that supports works. Specifically, it appears that there are issues with the scss files.

I would appreciate any help at this point.

On Tue, Jul 31, 2018 at 1:19 AM, Bloodcast69 notifications@github.com wrote:

@riyadali https://github.com/riyadali I guessed this solution, but I had to check it. In the .angular-cli.json file, you do not import styles that are used in angular-bootstrap-md library. The solution will be to add the following code to the style array in the .angular-cli.json file.

"styles": [ "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", "../node_modules/angular-bootstrap-md/scss/mdb-free.scss", "styles.scss" ],

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/issues/87#issuecomment-409098149, or mute the thread https://github.com/notifications/unsubscribe-auth/AUQvFQKhzSeayXs1ARdbLC9DuJkLlgqLks5uL-jygaJpZM4VZtW_ .

@riyadali I don't know why you're using Stackblitz, but okay.

I didn't used Stackblitz in my projects, but I assume that Stackblitz runs on a old version of Angular (probably 2 or 4) and that's why .angular-cli.json file appears there.

You're right that .angular-cli.json file is deprecated in Angular 6. Instead of it you should use angular.json file.

About problems with Font Awesome:

You need to install it by doing npm install font-awesome and then you have to provide a link to that library (library is contained in node_modules/font-awesome directory) into your .angular-cli.json / angular.json files.

But be aware, that you have to point exact path, so other path will suite .angular-cli.json and other path will suite for angular.json files. If you're includes font awesome library from some CDN in index.html file, you don't have to put another Font Awesome in .angular-cli.json / angular.json files.

If you still need help, feel free to ask.

I think I'm going to start over. I believed that the configuration for my project is messed up. It shouldn't have both an angular.json and an angular-cli.json file. I suspect that the template that I used for the project (from the angular-io heroes tutorial) was originally an agular-cli.json template that was converted to using angular.json. So it has pieces of both. Worse, it was originally a css style project that I converted to scss using instructions from your 5min quickstart tutorial ( https://mdbootstrap.com/angular/5min-quickstart/). After doing some research on the internet I was able to find a simple angular 6 project that only uses angular.json and scss. This project can also be deployed to stackblitz so my original speculation that stackblitz requires an angular-cli.json file is incorrect. I will use this project as the starting point for my updates.

This may take me a while because nothing ever goes smoothly. But I'll post a response if and when I'm able to get it successfully working with your toolbar, on stackblitz, and using SCSS and only an angular.json file.

Regards, Riyad

On Wed, Aug 1, 2018 at 1:56 AM, Bloodcast69 notifications@github.com wrote:

@riyadali https://github.com/riyadali I don't know why you're using Stackblitz, but okay.

I didn't used Stackblitz in my projects, but I assume that Stackblitz runs on a old version of Angular (probably 2 or 4) and that's why .angular-cli.json file appears there.

You're right that .angular-cli.json file is deprecated in Angular 6. Instead of it you should use angular.json file.

About problems with Font Awesome:

You need to install it by doing npm install font-awesome and then you have to provide a link to that library (library is contained in node_modules/font-awesome directory) into your .angular-cli.json / angular.json files.

But be aware, that you have to point exact path, so other path will suite .angular-cli.json and other path will suite for angular.json files. If you're includes font awesome library from some CDN in index.html file, you don't have to put another Font Awesome in .angular-cli.json / angular.json files.

If you still need help, feel free to ask.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/issues/87#issuecomment-409458148, or mute the thread https://github.com/notifications/unsubscribe-auth/AUQvFRqDFGJ4p3TGicZn91rI9Q0WiYh6ks5uMUMggaJpZM4VZtW_ .

mdbootstrap / mdb-angular-ui-kit