Grid column header height

[Pavel]

Hello, I want to put a custom style on the grid column header

for example make it a button via bootstrap class, however the top and bottom parts of the button are getting cut off because the column header container height is too small. How do I increase the height

<HeaderTemplate>
    <button @onclick="@Filter" class="btn btn-outline-primary" >
        Column Header
    </button>
</HeaderTemplate>

[Keerthana Ganesan]

Hi Pavel,

Greetings from Syncfusion support.

We have analyzed your query and suggest you style the bootstrap class using CSS to set the border-radius to avoid cutting off the top and bottom parts of the button. Kindly refer to the attached code snippet for your reference.

<HeaderTemplate>

            <button @onclick="@Filter" class="btn btn-outline-primary" >

                       Column Header

            </button>

           </HeaderTemplate>

...
<style>

    .btn .btn-outline-primary{

         border-radius : 2px;

    }

</style>

Kindly get back to us if you have any further queries.

Regards,

Keerthana.

[Pavel]

hello that did not work
as the bottom half of the button is cut off

[Pavel]

The solution I was looking for 

.e-grid .e-headercelldiv{
height: fit-content !important;
}

[Monisha Saravanan]

Hi Pavel,

Thanks for the update.

We are glad to hear that the reported issue has been resolved on your own. Kindly get back to us if you have further queries. As always we will be happy to help you.

Regards,

Monisha