select2 dropdown styles not showing properly

Hi, I’m new working with AdminLTE the same than Angular2 (I’m a backend developer more than frontend one).

I was able to properly configure AdminLTE components but I’m facing the following issue trying to make select2 work as expected.

First of all I installed select2 by running:

npm install select2 --save

I also noted by researching through the web, that I need to add the following script into my .angular-cli.json file:

"../node_modules/admin-lte/plugins/select2/select2.full.js",

Then, in my component.ts file I added the following line to initialize my select2 control:

$(".select2").select2();

Finally, my component.html file has the following dropdown which should be working with the select2 behavior:

<select class="form-control select2" style="width: 100%;" id="addressCityId" name="addressCityId" [(ngModel)]="client.addressCityId "> <option *ngFor="let city of cities" [value]="city.cityId">{{city.description}}</option </select>

Expected behavior: The dropwdown should be displaying with the same style than the AdminLTE Advanced Forms example page.

Current behavior: The dropdown works with select2 behavior by adding the search box, however the styles are broken and showing with no styles at all.

I even tried to fix this by adding the followinng line in the variales.less file but this didn’t work though.

@import "../node_modules/admin-lte/build/less/select2";

I know this will probably be a stupid question but I swear I really tried to fix it by searching everywhere :p

Would somebody please provide any guidelines to resolve this?.

Thanks in advance!.

[sunny-kevin]

cover the style on your page. <style> .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single { border: 1px solid #d2d6de; border-radius: 0; padding: 6px 12px; height: 34px; } .select2-container .select2-selection--single .select2-selection__rendered { padding-right: 10px; } .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; right: 3px; } </style>

[csotomon]

Hola @JuanAzar si quieres tener unas bases para implementar AdminLTE en Angular, puedes revisar https://github.com/csotomon/Angular2-AdminLTE , No está implementado la parte de select2, pero te puede dar una idea de como organizar tu proyecto.

En esta rama https://github.com/csotomon/Angular2-AdminLTE/tree/v3.0.0 se está trabajando la versión 3.0.0 de AdminLTE.

Espero que te sirva de algo.

No estoy trabajando en la versión 2.4.x de AdminLTE porque me estoy centrando en la versión 3.0.0, pero si necesitas ayuda con la versión 2.4.x que usa select2, lo podemos mirar juntos.