Override header height

[Joko Pitoyo]

to make grid more compact i try to override variables, but this not working, what right ways to override grid variable?

`

<style>

//using selector notworking
<div>
<div>#grid {</div>
<div>            –smart-grid-header-height: 30px;</div>
<div>            –smart-grid-row-height: 25px;</div>
<div>        }</div>
//using tag not working
<div>        smart-grid {</div>
<div>            –smart-grid-header-height: 30px;</div>
<div>            –smart-grid-row-height: 25px;</div>
<div>        }</div>
</div>
</style>

`

• This topic was modified 2 years, 4 months ago by Joko Pitoyo.

[admin]

Hi Joko,

The sample code below shows how to set the columns height and rows height in our Datagrid component. Note that the minimum row height is 30px.

smart-grid {
    width: 100%;
    width: 100%;
    height: 600px;
    --smart-grid-column-header-height: 30px;
    --smart-grid-row-height: 30px;
}

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts