I can't get the dropdown item to fit perfectly inside the pager.

[Gencer]

In the pager, the dropdown doesn't have the same margin as the other elements. Also, I can't change the font and selected element color when I open the list. css code: 

.e-pager {
    background-color: #f8f9fa !important; /* Hafif gri zemin */
    border: 1px solid #dee2e6 !important; /* İnce çerçeve */
    padding: 0 !important; /* Çok az boşluk */
    min-height: 24px !important; /* Yüksekliği sabitle */
    line-height: 1px !important;
    font-family: 'Segoe UI', sans-serif !important;

}

    /* 2. Pager İçindeki Kapsayıcı (Container) */
    .e-pager .e-pagercontainer {
        background-color: transparent !important;
        border: none !important;
        margin: 0 0 1px 0 !important;
        padding: 0 !important;
        min-height: 100% !important;
    }

    /* 3. Sayfa Numaraları ve Oklar (Ortak Özellikler) */
.e-pager .e-numericitem,
.e-pager .e-first,
.e-pager .e-prev,
.e-pager .e-next,
.e-pager .e-last,
.e-pager .e-pp, /* "..." işareti */
.e-pager .e-np /* "..." işareti */ {
    background-color: transparent !important;
    color: #333 !important;
    font-size: 11px !important;
    padding: 0 !important; /* Tıklama alanı */
    min-width: 20px !important;
    height: 22px !important;
    line-height: 1px !important; /* Dikey ortalama */
    border-radius: 3px !important;
    border: 1px solid transparent !important;
    margin-right: 2px !important;
    display: inline-flex !important; /* İçeriği esnek kutu yap */
    justify-content: center !important; /* Yatayda ortala */
    align-items: center !important; /* Dikeyde ortala */
}

        /* 4. Hover (Üzerine Gelince) */
        .e-pager .e-numericitem:hover,
        .e-pager .e-prev:hover,
        .e-pager .e-next:hover,
        .e-pager .e-first:hover,
        .e-pager .e-last:hover {
            background-color: #e2e6ea !important; /* Hafif koyu gri */
            color: #000 !important;
            border-color: #adb5bd !important;
        }

        /* 5. Aktif Sayfa (Seçili Olan) */
        .e-pager .e-numericitem.e-active {
            background-color: #547167 !important; /* Enki rengi */
            color: white !important;
            font-weight: 400 !important;
            border-color: #455d55 !important;
        }

    /* 6. "Sayfa X / Y (Toplam Z kayıt)" Yazısı */
    .e-pager .e-parentmsgbar {
        font-size: 10px !important; /* Bilgi yazısı daha küçük olsun */
        color: #666 !important;
        margin-top: 2px !important;
        padding-right: 6px !important;
        font-weight: normal !important;
    }

    /* 7. Dropdown (Sayfa Boyutu Seçimi - 10, 20, 50 vs.) */
    .e-pager .e-pagesizes {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 0 6px !important;
        height: 22px !important;
        align-items: center !important;
    }

    /* Dropdown Kapsayıcısı (Input Group) */
        .e-pager .e-pagesizes .e-input-group,
        .e-pager .e-pagesizes .e-input-group.e-control-wrapper {
            height: 22px !important;
            min-height: 22px !important;
            border-radius: 3px !important;
            border: 1px solid #dee2e6 !important; /* Standart gri çerçeve */
        }

        /* Input Alanı (Rakamın yazdığı yer) */
        .e-pager .e-pagesizes .e-input-group .e-input {
            height: 20px !important; /* Border payı düşüldü */
            min-height: 20px !important;
            font-size: 11px !important;
            font-family: 'Segoe UI', sans-serif !important;
            padding: 0 4px !important;
            margin: 0 !important;
        }

        /* Ok İşareti (Icon) */
        .e-pager .e-pagesizes .e-input-group .e-input-group-icon {
            min-height: 20px !important;
            height: 20px !important;
            line-height: 1px !important;
            font-size: 10px !important;
            border: none !important;
            width: 20px !important;
        }

        /* 2. MADDE ÇÖZÜMÜ: Focus Olunca Mavi Çerçeveyi (Box-Shadow) Kaldır */
        .e-pager .e-pagesizes .e-input-group.e-input-focus,
        .e-pager .e-pagesizes .e-input-group:focus,
        .e-pager .e-pagesizes .e-input-group:focus-within {
            box-shadow: none !important; /* O kalın mavi parlamayı yok et */
            border-color: #547167 !important; /* Senin yeşil renginle ince bir çerçeve yap */
        }

    .e-pager .e-pagerdropdown {
        height: 22px !important;
        min-height: 22px !important;
    }

[Prathap Senthil]

Hi Gencer,

Based on the details shared, the dropdown item does not fit correctly inside the pager. Using the provided CSS customization, we rendered the standalone pager component, and the dropdown appears correctly inside the pager. We also noticed that some misalignment occurs in the pager container due to your CSS changes. After removing those CSS changes, the pager container works properly. For your reference, we have attached the sample.

sample: https://blazorplayground.syncfusion.com/embed/rDLHZqXkzKncVKwg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

However, before we proceed with investigating the reported issue, we require some additional clarification from your end. Kindly provide the following details so we can move forward at our side:

• Could you please confirm whether the issue occurs in the standalone Pager component or in the Grid with the paging feature?
• Could you please share the complete code snippet?
• Could you please provide a video demonstration of the issue or screenshot for the issue?
• Could you provide a simple sample that replicates the duplicate data issue?

The above‑requested details will help us validate the reported problem and provide a solution as early as possible. Thank you for your understanding.

Regards,
Prathap Senthil

[Gencer]

I'm experiencing this issue in both SfPaher and SfGrid. I've included a picture of the image distortion.

[Gencer]

I'm experiencing this issue in both SfPaher and SfGrid. I've included a picture of the image distortion.

[Naveen Palanivel]

Hi Gencer,

We checked your query and the screenshot you provided. It appears that the SfPager and SfGrid pager UI is distorted on your side. As mentioned in our previous update, this issue occurs due to the custom CSS modifications applied in your application, which cause misalignment in the pager container. We also confirmed that without your custom CSS, the pager UI works correctly and no distortion occurs.

For your reference, we prepared a sample that includes both SfPager and SfGrid, and we applied your CSS customizations. The issue was reproducible only when your CSS changes were active. After removing them, the problem no longer occurred. Please refer the below screenshot for more information.

Screenshot:

We have also attached a video recording for your reference and included it along with the sample for better understanding.

To further validate the reported issue, please provide the following details to help us investigate further:

• Please share the purpose of adding the custom CSS and what specific UI output you are trying to achieve.
• Please share the expected UI design or a screenshot of how you want the pager to look after applying your custom CSS.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Sample: Check the attachment.

Video: Check the attachment.

Regards,
Naveen

Attachment: BlazorApp_Server_2818cdf6.zip

[Naveen Palanivel]

Video demo below,

Attachment: screenCSS_32ec7397.zip

[Gencer]

The problem was resolved after switching to Syncfusion Fluent 2. Thank you.

[Prathap Senthil]

Thanks for the update, we are happy to hear that the reported issue has been resolved after switching to Fluent 2 theme.

Please get back to us if you have further queries.