CODEWITHSUNDEEP
htmlcssangularprimeng
Shorya Sinha
Shorya Sinha

Reputation: 75

Customizing styles of button in PrimeNG

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;
}

Upvotes: 3

Views: 6417

Answers (2)

Dino
Dino

Reputation: 8292

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

Upvotes: 1

jitender
jitender

Reputation: 10429

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

Upvotes: 1

Related Questions