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

2 Answers 42 Views
Grid
Morten
Top achievements
Rank 1
Veteran
Iron
Morten asked on 22 Mar 2022, 04:27 PM

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
Top achievements
Rank 1
Veteran
Iron
commented on 23 Mar 2022, 07:25 AM | edited

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

2 Answers, 1 is accepted

Sort by
1
Accepted
Nikolay
Telerik team
answered on 25 Mar 2022, 09:08 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Morten
Top achievements
Rank 1
Veteran
Iron
answered on 25 Mar 2022, 12:22 PM
Thanks Nikolay
Tags
Grid
Asked by
Morten
Top achievements
Rank 1
Veteran
Iron
Answers by
Nikolay
Telerik team
Morten
Top achievements
Rank 1
Veteran
Iron
Share this question
or