1. Home
  2. Forum
  3. Blazor
  4. How to change the grid pagination style

How to change the grid pagination style

Hi,

how can I adjust the style of the grid pagination in a way, that the number buttons have the same height as the navigation buttons left and right?



Thank you and best regards

Sven


5 Replies
RN Rahul Narayanasamy Syncfusion Team February 4, 2022 01:42 PM UTC

Hi Sven, 

Greetings from Syncfusion. 

Query: how can I adjust the style of the grid pagination in a way, that the number buttons have the same height as the navigation buttons left and right? 

We are quite unclear about your requirement since the number buttons in pager is same height as the navigation buttons in the pager. Find the below screenshot for your reference. 

 

If it is not your requirement or if we misunderstood your requirement, then please share more details about your requirement. 

Also, we suspect that you want to set same height for pager dropdown in the pager. If yes, then you can achieve your requirement by using below CSS. Find the below code snippets and screenshot for your reference. 

<style> 
    .e-pagerdropdown{ 
        height: 43px !important; 
    } 
    span.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper.e-valid-input { 
        height: 39px; 
    } 
    input#dropdownlist-82b398d8-e35c-4346-acc7-6ee8eba3a344{ 
       height: 37px; 
    } 
</style> 

 

If it is not your requirement or if we misunderstood your requirement, then please share more details about your requirement. 

Please let us know if you have any concerns. 

Regards, 
Rahul 


SB Sven Boris Bornemann February 7, 2022 08:37 AM UTC

Hi,


sorry no I mean not the drop down ;)

I mean the height and the width of the page numbers. I want that they fill the complete space on hover or in the active state.

I found a paddding in .e-pager .e-spacing, .e-pager .e-numericitem:hover, .e-pager .e-currentitem,

but I don't know how i can remove it and if it is really the best way.


Thanks and best regards

Sven


RN Rahul Narayanasamy Syncfusion Team February 8, 2022 02:38 PM UTC

Hi Sven, 

Thanks for the update. 

Based on your shared details, we have checked the reported case. We could not able to reproduce the case at our end. The active state and hover state is completely filled in the entire space. Find the below picture for your reference. 

 

We need more details regarding your reported problem. Could you please share the below details which will be helpful to validate and provide a better solution. 
 
  • Whether did you referred any custom theme in your application?
  • Which type of theme(like bootstrap4 / bootstrap/ material / other themes) you are currently referring in your application.
  • Share a simple reproduceable sample if possible.
 
Regards, 
Rahul 


SB Sven Boris Bornemann February 8, 2022 04:00 PM UTC

Hi, 


thank you for the answer. You can see the same behaviour in your demos:  https://blazor.syncfusion.com/demos/datagrid/paging?_gl=1*1y047qf*_ga*NTIwOTI3MjU2LjE2MTM0ODc4OTE.*_ga_WC4JKKPHH0*MTY0NDMzNTc3Ni45OC4xLjE2NDQzMzU4MzAuMA..&_ga=2.136452656.1293813072.1644318063-520927256.1613487891


We use the bootstrap5 theme.


Best regards


RN Rahul Narayanasamy Syncfusion Team February 9, 2022 03:05 PM UTC

Hi Sven, 

Thanks for sharing the details. 

We are able to reproduce the reported case at our end while checking the reported case with bigger resolution screen. We can able to see the mentioned space and you can resolve the problem by increasing the padding for the below CSS. Find the below code snippets for your reference. 

Could you please ensure the reported case after applying the below styles/ or increase the highlighted padding(based on your screen size) from your end? 

<style> 
    .e-pager .e-spacing, .e-pager .e-numericitem:hover, .e-pager .e-currentitem { 
        padding: 9.5px 11px 8.5px 12px; 
    } 
    .e-pager .e-pagercontainer .e-nextpage { 
        padding: 12px 10px 10px 9px; 
    } 
    .e-pager .e-pagercontainer .e-prevpage { 
        padding: 12px 10px 10px 9px; 
    } 
    .e-pager .e-pagercontainer .e-firstpage { 
        padding: 12px 10px 10px; 
    } 
    .e-pager .e-np { 
        padding: 12.5px 11px 8.5px 10px !important; 
    } 
    .e-pager .e-pagercontainer .e-lastpage { 
        padding: 12px 10px 10px 8px; 
    } 
</style> 

Please let us know if you have any concerns. 

Regards, 
Rahul 
 


Loader.
Up arrow icon