font size in DataGrid Header
I try to increase the font size in the column headers of my DataGrid. When I increase the font size above a certain limit (approx. 16 px) in the style, the font size increases correspondingly in the application, but the bottoms of the letters are truncated. e. g.
Especially p in part, y in By and in Study, and j in Project are not shown correctly.
I use the following
<GridColumns>
<GridColumn HeaderText="Used in" Field="@nameof(ChemicalDetailsModel.SolName)"></GridColumn>
<GridColumn HeaderText="As part of" Field="@nameof(ChemicalDetailsModel.SolInSolName)"></GridColumn>
<GridColumn HeaderText="Used on" Field="@nameof(ChemicalDetailsModel.UseDate)" Format="yyyy-MM-dd"></GridColumn>
<GridColumn HeaderText="Used By" Field="@nameof(ChemicalDetailsModel.UsedBy_Name)"></GridColumn>
<GridColumn HeaderText="Project" Field="@nameof(ChemicalDetailsModel.ProjectName)"></GridColumn>
<GridColumn HeaderText="Study" Field="@nameof(ChemicalDetailsModel.StudyName)"></GridColumn>
</GridColumns>
and in <syle>
.e-grid .e-headercell, .e-grid .e-detailheadercell {
background: yellow;
height: 48px;
}
.e-grid .e-headercelldiv {
font-size: 24px;
}
How can I show the text without cutting the bottom?
Hartmut
Hi Hartmut,
Based on your requirement, we suggest you use the below CSS customization to
achieve your requirements . Kindly refer to the below code snippet and sample
for your reference.
|
<style>
.e-grid .e-headercell, .e-grid .e-detailheadercell {
background: yellow; }
.e-grid .e-headercelldiv {
font-size: 24px; height : 48px;
}
.e-grid .e-gridheader .e-sortfilter .e-headercelldiv, .e-grid .e-gridheader .e-stackedheadercelldiv { padding: 10px 20px 0 5px; } </style>
|
Regards,
Prathap S
