Customizing styles of button in PrimeNG

user_9220761 0
Viewed 3458

How can i customize the style of buttons in PrimeNG picklist and disable the buttons i don't need?

I have tried setting the css property of buttons to none but it doesn't work. Also tried setting the style for image but none of them works

HTML Code:

<p-pickList [source]="availableCategories" [target]="selectedCategories" sourceHeader="Available Categories" targetHeader="Selected Categories" dragdrop="true" [responsive]="true"
  [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" >
    <ng-template let-list pTemplate="item">
        <div class="ui-helper-clearfix">
            <div class="items">{{list.categoryDescription}}</div>
        </div>
    </ng-template>
</p-pickList>

CSS

.ui-picklist-buttons {
   display: none;
}
.ui-picklist-filter-icon {
    left: 0em;
}
primeng angular css html
2 Answers

Add you styles to global styles i.e style.css or add ::ng-deep to your styles like

::ng-deep .ui-picklist-buttons {
   display: none;
}
::ng-deep .ui-picklist-filter-icon {
    left: 0em;
}

Note in this way these styles will become global styles and will effect throughout the application if you want to do it on particular page only then add some parent class and apply styles inside that class

user_56218270

You should add styleClass property to your <p-picklist> element

<p-pickList styleClass="myPickList">

And then in your components CSS you can apply the following style:

::ng-deep .myPickList .ui-picklist-buttons {
  display: none;
}

Stackblitz

user_66946450
Related