1. Home
  2. Forum
  3. Blazor
  4. How to change Row Height of Grid in CSS

How to change Row Height of Grid in CSS

I have sfGrid control.I would like to know how to change "RowHeight" of grid row /grid header and grid toolbar based on Media Query in CSS


5 Replies
KI KINS October 14, 2021 11:00 AM UTC

pls help.

it's my top most urgent


KI KINS October 15, 2021 05:29 AM UTC

Is it possible to get reply today??




VN Vignesh Natarajan Syncfusion Team October 15, 2021 05:37 AM UTC

Hi KINS,  
 
Greetings from Syncfusion support.  
 
Query: “I have sfGrid control.I would like to know how to change "RowHeight" of grid row /grid header and grid toolbar based on Media Query in CSS” 
 
We suggest you to achieve your requirement by applying styles to the below classes. Refer the below code example.  
 
<style> 
    @@media (max-width: 640px) { 
        .e-grid .e-headercell, .e-grid .e-detailheadercell { 
            height: 18px; 
        } 
  
        .e-grid .e-rowcell { 
            line-height: 3px; 
        } 
  
        .e-grid .e-toolbar { 
            height: 15px !important; 
            min-height: 9px; 
        } 
  
            .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item { 
                min-height: 5px; 
            } 
  
            .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn { 
                line-height: 0px; 
            } 
  
            .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn { 
                height: inherit; 
            } 
  
            .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon { 
                line-height: 0px; 
                min-height: 0px; 
            } 
  
            .e-grid .e-toolbar .e-toolbar-items { 
                min-height: 0px; 
                height: inherit; 
            } 
    } 
</style> 
 
 
 
Kindly refer the below screenshot for your reference 
 
 
 
  
For your convenience we have prepared a sample which can be downloaded from below  
 
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 


KI KINS October 15, 2021 10:17 AM UTC

Thanks for support...

How to change height of "Footer" of grid (Summary Footer) and toolbar text font 


VN Vignesh Natarajan Syncfusion Team October 18, 2021 04:58 AM UTC

Hi KINS,  
 
Thanks for the update.  
 
Query: “How to change height of "Footer" of grid (Summary Footer) and toolbar text font ” 
 
As per your requested we have modified the previous attached sample by changing the height of Grid summary footer and toolbar text. Kindly refer the below modified sample for your reference 
 
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon