New to Telerik UI for Blazor? Download free 30-day trial

Change the Pager DropDown Width


Product Pager for Blazor,
Grid for Blazor,
ListView for Blazor


How to change the pager dropdown list width and make it wider? The page size number in the DropDownList is cut off when it contains three or more digits.


Use custom CSS to override the default width in the Telerik Blazor theme.

  1. Set a custom Class to the component (Pager, Grid or ListView).
  2. Target the .k-pager-sizes .k-dropdownlist elements inside the component(s) with this custom Class.

Change the Pager dropdown width

<h2>Pager in Grid:</h2>

<TelerikGrid Class="wider-pagesizes"
        <GridPagerSettings PageSizes="@PageSizes" />
        <GridColumn Field="@nameof(Product.Name)" />

<h2>Standalone Pager:</h2>

<TelerikPager Class="wider-pagesizes"
              PageSizes="@PageSizes" />

    .wider-pagesizes .k-pager-sizes .k-dropdownlist {
        width: 12em;

@code {
    private List<Product> GridData { get; set; }

    private List<int?> PageSizes { get; set; } = new List<int?> { 10, 20, null };

    protected override void OnInitialized()
        GridData = new List<Product>();

        for (int i = 1; i <= 50; i++)
            GridData.Add(new Product()
                Id = i,
                Name = "Product " + i

    public class Product
        public int Id { get; set; }
        public string Name { get; set; }

To target all pager instances in the app, you can skip the custom CSS class:

Change the width of all pager dropdowns

.k-pager .k-pager-sizes .k-dropdownlist {
    width: 12em;
In this article