Angular PrimeNG：如何修改p-paginator中rowsPerPageOptions生成的p-dropdown样式

Hey there! I’ve run into similar quirks with PrimeNG’s p-paginator before, so let’s work through fixing both your layout and dropdown size problems together.

1. Get the Dropdown & Page Controls on the Same Line #

The default p-paginator uses flexbox to align elements side-by-side, but sometimes custom styles or theme overrides can break this alignment. Here’s how to enforce the correct layout:

Add this CSS to your component’s styles (or global styles if needed):

::ng-deep .p-paginator {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Adjust spacing between elements to your preference */
}

/* Prevent the dropdown from taking unnecessary width */
::ng-deep .p-paginator .p-dropdown {
  flex-shrink: 1;
}

This forces the paginator to use flex layout, aligns all items vertically centered, and stops the dropdown from pushing other controls onto a new line.

2. Shrink the Rows Per Page Dropdown #

To make the dropdown smaller, tweak its width, font size, and inner padding. Add these styles:

::ng-deep .p-paginator .p-dropdown {
  width: auto; /* Let it fit the content instead of forcing full width */
  max-width: 120px; /* Set a maximum width to keep it compact */
}

::ng-deep .p-paginator .p-dropdown .p-dropdown-label {
  font-size: 0.875rem; /* Reduce font size for a smaller look */
  padding: 0.375rem 0.75rem; /* Shrink inner padding */
}

::ng-deep .p-paginator .p-dropdown .p-dropdown-trigger {
  padding: 0.375rem; /* Make the trigger button smaller */
}

Feel free to adjust values like max-width or font-size to match your design system.

Quick Troubleshooting Tip #

Use your browser’s developer tools (F12) to inspect the paginator and dropdown elements. This lets you spot any existing styles that might be overriding your custom CSS, so you can adjust specificity if needed.

内容的提问来源于stack exchange，提问作者Sandy Lueng