Grid update Kendo UI v2021.3.1216 > Kendo UI v2022.1.301 css/style/alignment issue

[Morten]

After upgrading from Kendo UI v2021.3.1216 to Kendo UI v2022.1.301 my grid search button has changed a little and is now misaligned.

I use this code to display a search button with an icon inside the text box:

<span class="k-textbox k-grid-search k-display-flex" style="margin-left:3px;">
    <input id="search-questions" autocomplete="off" placeholder="[#[Search]#]..." class="k-input">
    <span class="k-input-icon"><span class="k-icon k-i-search"></span></span>
</span>

I'm using bootstrap 3 as the theme. I can't spot the CSS that cause the misalignment.

Before and after:

 

 

[Morten]

The idea for the implementation of the search button in the toolbar template comes from this forum thread: https://www.telerik.com/forums/search-panel-and-toolbar-template

[Nikolay]

Hi Morten,

Since Kendo UI R1 2022 release there is a rendering change in some of the widgets including the TextBox. As a result of this, the TextBox now exposes new styling options:

https://docs.telerik.com/kendo-ui/controls/editors/textbox/appearance#options

To have the same appearance of the Search panel you can use the following HTML in the toolbar template:

      <script type="text/x-kendo-template" id="template">
        <span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid k-grid-search">
      		<span class="k-input-icon k-icon k-i-search"></span>
   		<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input-inner">
        </span>
      </script>

Here is a runnable Dojo demo demonstrating the above: https://dojo.telerik.com/oLulEgOf

Regards,
Nikolay
Progress Telerik

[Morten]

Thanks Nikolay