Hi All,
How can I make my add button and search alignItem = space in between
Wanted to make add button placed at left corner and the search on the right corner of the toolbar.
Search position is okay but cant set the add button be on the left corner.
Please see pic attached
.ToolBar(toolbar => { toolbar.Create(); toolbar.Search(); })
Thanks!
Ryan
3 Answers, 1 is accepted
Hi Ryan,
The Grid should display the "Add new record" button in the left corner by default. Here's a screenshot that shows how it looks like at my end with the ToolBar configuration you posted when using the Bootstrap-v4 theme.
The search panel is positioned in the right corner through the following CSS rule:
.k-grid .k-grid-search {
float: right;
}With regard to the "Add new record" button, there is no specific rule that positions it in the left corner, and it should be displayed there unless there is a custom CSS rule that overrides its position. Check whether removing all the custom CSS applied to the page and leaving only the Kendo UI CSS files/-s resolves the issue.
Alternatively, check whether applying the following CSS rule will have the desired effect:
.k-grid .k-grid-toolbar .k-grid-add {
float: left;
}Regards,
Ivan Danchev
Progress Telerik
Rank 1
Thank you Ivan Danchev, it works!
Just a followup, what about for excel, whats the name of css? wanted to put it beside create button.
Thanks again!
.ToolBar(toolbar => { toolbar.Create(); toolbar.Excel(); toolbar.Search();})Hello Ryan,
The class of the Excel toolbar button is .k-grid-excel, so the rule for Create and Excel buttons would look like this:
.k-grid .k-grid-toolbar .k-grid-add,
.k-grid .k-grid-toolbar .k-grid-excel {
float: left;
}
Regards,
Ivan Danchev
Progress Telerik