Styles to Pager.pageSizes dropdown popup

[Pablo]

Hi guys,

I'm trying to style a <Pager pageSizes> dropdown popup.

Is there any way to add a className to it? Or the only workaround is to create a complete custom Pager to do so?

Thanks!

[Wissam]

Hi, Pablo,

Thank you for the provided screenshot.

I could see that you want to change the text color. You can achieve this by using the `k-list-item-text` className. In addition, you can use the `k-list-md` if you want to style the whole list item.

For convenience, I prepared an example where I am setting the list item text's color to red, background to blue, and the list item's background to green:

• https://stackblitz.com/edit/react-6qhtmw?file=app%2Fmain.jsx

Please check the above example and let me know if you have any further questions on this matter.

In addition, I could also see that you submitted the same question in the forums with ID: 1628805. Therefore, I will delete since it is related to the same implementation.

Regards,
Wissam
Progress Telerik

[Pablo]

Hi Wissam,

Thank you for the answer!

Those classes work but I'd like to only target that particular dropdown. For instance I'd like to give the box a different width. Is there any other workaround?

 

[Wissam]

Hello, Pablo,

I understand that you want to make the styles specific to a the dropdown in the pager, since these classes could affect other dropdowns. Is this correct?

Basically, adding a class or changing the styles of the dropdown of the pager can only be possible by wrapping the Pager component with a DropDownList context provider.

For convenience, I prepared an example where I am setting the width of the DropDownList popup to `50px` using popupSettings.width, the button width to `150px` using style.width, and I am adding a className to the dropdown to make the previous styles for the color and background of the list specific to the dropdown of the pager:

• https://stackblitz.com/edit/react-6qhtmw-jnzsbd?file=app%2Fmain.jsx

For more information on the DropDowns props context, you can check the following article:

• https://www.telerik.com/kendo-react-ui/components/dropdowns/props-context/

I hope this helps, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik