css for font size for row in RowDirection.Vertical mode

[Simon]

The following css will change the font size for a datagrid in blazor when the RowRenderingMode is set to Horizontal:

.e-grid .e-rowcell {    font-size: 9px;    height: auto;}

However, when  RowRenderingMode is set to Vertical the css makes no change to the font size.

Is it possible to change the font-size of a datagrid when in Vertical row mode?

Thanks

[Sanjay Kumar Suresh]

Hi Simon ,

 

It appears that you're using the Adaptive UI feature in the Blazor DataGrid. To customize the appearance of the grid under Adaptive UI, we recommend overriding the default styles applied by the e-bigger class, which is automatically added when Adaptive UI is enabled.

 

You can achieve this by targeting the .e-bigger .e-grid .e-rowcell selector in your CSS. Here's a sample snippet:

 

Code Snippet:

 

<style>

    .e-bigger .e-grid .e-rowcell {

        font-size: 9px;

        height: auto;

    }

</style>

 

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

 

We request you to check the above sample and get back to us if you have any concerns.

 

Regards,

Sanjay Kumar Suresh

[Simon]

Hi Sanjay

I do have EnableAdaptiveUI="true" and AdaptiveUIMode="AdaptiveMode.Both"

The style above with e-bigger class makes no difference. The font-size has not been changed. Is there another class I should be using?

Thank

[Sanjay Kumar Suresh]

Hi Simon,

We have reviewed the provided sample by setting the adaptive mode to AdaptiveMode.Both and it appears to be working as expected from our end.

To demonstrate the observed behavior, we’ve attached a video for your reference. Kindly clear the bin, obj folders and cache from your side and try again. If the issue still persists, please share a sample that reproduces the problem so we can assist you more effectively.

Regards,

Sanjay Kumar Suresh

Attachment: AdaptiveUIChangesWorksFine_d55e0327.zip