Default grid toolbar cant be css

[Hoangminh Nguyen]

Here is my basic grid doing database editing:

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() {"Edit", "Update", "Cancel", "Search" })">

<e-data-manager url="/ManageEvaluation/[email protected]&[email protected]" adaptor="UrlAdaptor" updateUrl="/ManageEvaluation/Update"></e-data-manager>

<e-grid-editSettings allowEditing="true" mode="Normal"></e-grid-editSettings>

<e-grid-columns>

</e-grid-columns>

</ejs-grid>
For some reason, the grid toolbar takes up almost half the page size
I tried doing some CSS but it doesn't work:

<style>

.e-toolbar {

height: 10%;

}

</style>
The only way I can change its size is when I inspect it with my browser and edit the height from 

<div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: auto;" tabindex="-1">

[Joseph Christ Nithin Issack]

Hi Hoangminh,

Greetings from Syncfusion support.

  Before proceeding to the solution, kindly share the below details.

• Complete grid rendering code.
• Simple sample to reproduce the issue.
• Video demo of the issue.
• Syncfusion package version.

Regards,

Joseph I.