1

Im using angular-2-dropdown-multiselect with my Angular project with Angular CLI.

I was able to get it working in my project, but for some reason there are no styles applied. I have installed bootstrap 3 and FontAwesome as well since the documentation claims these are dependencies.

Update

Please note that updating bootstrap is not an option for me as the project is quite large and the rest of the layouts are based on bootstrap3

Can someone help me figure out whats going on?

Here is a demo of the issue

Improve this question
3
  • did you add the both inside your config json? Commented Jul 12, 2018 at 9:26
  • You mean the angular.json? yes I did: stackblitz.com/edit/angular-ssbbhm?file=angular.json Commented Jul 12, 2018 at 9:28
  • Iam added answer pls check once and let me know.If any error. Commented Jul 12, 2018 at 9:37

3 Answers 3

Reset to default
1

You need to set your path properly other wise it will not work and update your boostrap to latest version it will work Check your example i have edited https://stackblitz.com/edit/angular-xyg8hy

"styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

hmm, it doesn't seem to be an issue with the path. If you click and open the dropdown, you'll see that there are styling issues there
may be your boostrap is old version update to boostrap 4.. stackblitz.com/edit/angular-xyg8hy
thanks but unfortunately, updating bootstrap is not an option for me as the project is quite large and the rest of the layouts are based on bootstrap3
0

Here iam updated your stackblitz iam added bootstrap in index.html file https://stackblitz.com/edit/angular-h3jrnu

it's worked perfect

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
    <my-app>loading</my-app>
</body>

if your not use bootstrap 4 use this

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

enter image description here

Edit:-

Note:- angular-2-dropdown-multiselect used bootstrap 4 only. see the screenshot,

enter image description here screenshot,

Edit2:- index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

enter image description here

Improve this answer

7 Comments

thanks but unfortunately, updating bootstrap is not an option for me as the project is quite large and the rest of the layouts are based on bootstrap3
I noticed that you have changed the bootstrap version referred in the index.html, but still the issue exists and also including scripts on the head section is not how things should be done when using NPM and Angular CLI
The readme clearly mentions that the library supports bootstrap 3 github.com/softsimon/…
Maybe it is an issue with the library, I will open an issue on github. Thanks for your time
yeah iam seen. But that plugin not used bootstrap 3. If use angular cli go node modules folder and visit that package index.html
|
0

Taking a look at the releases of angular-2-dropdown-multiselect I noticed that Boostrap 4 support was introduced with version 1.7.

I tried downgrading to version 1.6.3 and the styling issues were fixed. So I guess the documentation was wrong about support for bootstrap 3 with the latest release.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.