1

This question already asked but it wont work for me. Am using Bootstrap 4 selectpicker in my angular 6, but it is not displaying. In css it shows display: none !important;

enter image description here

My sample code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

demo https://stackblitz.com/edit/angular-ivy-pmyy6e?file=src%2Fapp%2Fapp.component.html

Ramesh S
  • 585
  • 3
  • 10
  • 32
  • My first question is: is it an Angular project? If it is Angular, then why are you adding scripts and stylesheets like that? Second question is: did you initiate the `selectPicker` like this in your code? `$('.selectpicker').selectpicker();` – Shuvo May 17 '21 at 04:28
  • @Shuvo:Thanks for response, Yes it is Angular 6. And I added that script in stackblitz but still it is not showing https://stackblitz.com/edit/angular-ivy-pmyy6e?file=src%2Fapp%2Fapp.component.html – Ramesh S May 17 '21 at 05:01
  • Hello please check this link to setup bootsrap in angular project "https://www.talkingdotnet.com/add-bootstrap-4-to-angular-6-application/" – Ravi Ashara May 17 '21 at 05:45
  • To add jquery in angular project "npm install jquery --save" and add "scripts" :["./node_modules/jquery/dist/jquery.min.js"] in angular.json file – Ravi Ashara May 17 '21 at 05:47

2 Answers2

1

Add these links in head part on index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

Add these links in after body part completed on index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Add below content in app.component.html page

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Note: no need to add $('.selectpicker').selectpicker();

Ravi Ashara
  • 1,177
  • 7
  • 16
1

You can just add this to your css:

.selectpicker {
  display: block !important;
}

Here is the the updated example: https://stackblitz.com/edit/angular-ivy-i2ozz2?file=src/app/app.component.css

Since you are developing in Angular, I would suggest you to check @ng-select/ng-select package. It has so many useful features, and you can just install a package and use it.

Package: https://www.npmjs.com/package/@ng-select/ng-select

Here is the working example: https://stackblitz.com/edit/angular-fauxb2?file=src/multi-select-hidden-example.component.html

NeNaD
  • 18,172
  • 8
  • 47
  • 89
  • Yes it is showing now. But am expecting like this https://developer.snapappointments.com/bootstrap-select/examples/#basic-examples – Ramesh S May 17 '21 at 12:32
  • I want to multi select with checkbox , Actually in my code selectpicker css not working properly – Ramesh S May 17 '21 at 12:33
  • I updated answer with new example. Can you check it? It uses `@ng-select/ng-select` package. I will try later to make a working example with `bootstrap-select`. – NeNaD May 17 '21 at 13:20
  • Thanks for your answer actually in my project not able to install modules via npm (I don't have permission), That's why am using Bootstrap multi select. I give you upvote – Ramesh S May 17 '21 at 13:28
  • hi bro please help me on this https://stackoverflow.com/questions/67670248/dynamically-load-external-javascript-file-not-working-in-angular-6 – Ramesh S May 24 '21 at 13:16
  • I saw that someone already answered with working solution. – NeNaD May 24 '21 at 14:04