Angular PrimeNG -- How to change the style of p-dropdown that rowsperpageoptions generates in p-paginator tag

Question

I have a question about p-paginator to ask for help.

On the official website, it gives the example with uses of the attribute "rowsperpageoptions". It is displayed like this,

with p-dropdown that rowsperpageoptions generates along with the page nums in one line.

However my code would make them seperated like this,

Is there a way to change the style of p-dropdown that rowsperpageoptions generates, and make it smaller?

Answer 1

May be this could help.

Step 1: In angular.json file. Under architect > build > Make sure you have added the primeng.min.css and *anytheme[nova-light].css

    "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
                "outputPath": "dist/myPrimeNg",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": ["src/favicon.ico", "src/assets"],
                "styles": [
                    "node_modules/primeicons/primeicons.css",
                    "node_modules/primeng/resources/themes/nova-light/theme.css",
                    "node_modules/primeng/resources/primeng.min.css",
                    "src/styles.scss"
                ],

Note: You could also do the CDN referencing in index.html

Step 2: To over ride any pagination styles. In your component.css

:host::ng-deep {

.ui-paginator .ui-paginator-pages {
    width: 90px; // change this according to your need 
    line-height: 1;
}

}

Note: By default Width is set to Auto.

Hope this will help you in some way