CODEWITHSUNDEEP
angularmulti-selectprimeng
Aymen Kanzari
Aymen Kanzari

Reputation: 2023

MultiSelect with ng-dirty ng-valid

I was using a classic select with the css style bellow

select.ng-pristine.ng-invalid {
 border-left: 5px solid $primary-600 !important;
}
select.ng-dirty.ng-valid  {
 border-left: 5px solid $valid !important;
}
select.ng-dirty.ng-invalid  {
 border-left: 5px solid $error !important;
}

Now I use the PrimeNG multiselect, but I have same problems with this tag. I didn't know how to use ng-dirty, ng-valid, ng-pristine... with it. I followed the mentioned below class but it doesn't seem to be working

HTML

<p-multiSelect [options]="categories" formControlName="categoriesId" optionLabel="label" [filter]="false" [showToggleAll]="false"
                defaultLabel="-- Caterory --" appendTo="body"></p-multiSelect>

CSS

.ui-multiselect {
    padding:8px 15px;
    font-size: 13px;
    width:100%;
    margin:15px 0;
    border-radius:0;
    z-index: 1;
}
p-multiselect.ng-dirty.ng-valid  {
    border-left: 5px solid $valid !important;
}

How can I resize the panel containing items to make at the same size as the select input? And how can I remove the space that contains x just above items?

enter image description here

Upvotes: 1

Views: 1230

Answers (1)

Antikhippe
Antikhippe

Reputation: 6685

Override ui-multiselect-panel class :

 .ui-multiselect-panel {
     right: 8px;
     left: 8px;
 }

And for the cross :

.ui-multiselect-header .ui-multiselect-close {
   top: 0.3rem !important;
 }

See Plunker

Upvotes: 0

Related Questions