Grid toolbar components are vertical misaligned

1 Answer 22 Views
Grid ToolBar
Blazorist
Top achievements
Rank 1
Iron
Iron
Veteran
Blazorist asked on 17 Jun 2021, 03:11 PM | edited on 17 Jun 2021, 04:21 PM
Inside the grid toolbar I have a mix of components: dropdownlist, command buttons and toogle buttons in a toggle button group.
Everything works fine, the problem is that the vertical alignment of the dropdown lists and the toggle button group is different from that of the command buttons (see attached image).
I tried different styles or wrapping everything in a div and setting the styles but have not been successful.
Could you tell me that I should modify in order to get the buttons vertically aligned?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Accepted
Blazorist
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 17 Jun 2021, 05:59 PM

Well, I found that overriding css style k-button and set margin-top to 0 will align the buttons of the grid toolbar regardless of the type of button they are.

Just add this style: 

<style>
    .k-button {
        margin-top: 0;
    }
</style>
Bye.
Blazorist
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 17 Jun 2021, 06:03 PM

By the way, it would be nice if the buttons appear vertically aligned without needing this workaround.
Tags
Grid ToolBar
Asked by
Blazorist
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Blazorist
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or