input type="text" css class " k-input-solid" not applied by default

0 Answers 151 Views
Styling TextBox
Marco
Top achievements
Rank 1
Marco asked on 01 Aug 2022, 07:10 AM

Hi,

I upgraded my project from 2022.1.301 to 2022.2.621 and my text inputs lost there styling.

This markup worked fine with version 2022.1.301

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input" />

With the latest version it looks like the second input from above snippet.

It displays fine when i add the css class "k-input-solid":

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input k-input-solid" />

 

Do i have to update all my markup , or is this a bug?

Kind Regards,

Marco

 

 

 

 

 

 

 

 

Neli
Telerik team
commented on 03 Aug 2022, 10:58 AM

Hi Marco,

Could you please provide more details about how the issue can be replicated? On the screencast linked here the rendering of the TextBox with versions 2022.1.301 and 2022.2.621 is demonstrated. As you will see the rendering and the styling of the TextBox seems the same. Please let me know if I am missing something. Here you will find the Dojo from the screencast. 

Looking forward to your reply.

Regards,

Neli

Marco
Top achievements
Rank 1
commented on 03 Aug 2022, 11:16 AM | edited

Hi Neli,

I use the SASS bootstrap v4 theme.

You can replicate the issue with HTML markup only:

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input" />

With above markup there is no blue border when the input has focus. When i add "k-input-solid" it works fine.

I DO NOT instantiate the kendoTextBox.

 

Regards,

Marco

 

 

Neli
Telerik team
commented on 08 Aug 2022, 10:34 AM

Hi Marco,

In order to achieve the same appearance to the standard input element as Kendo TextBox, you will need to add all the classes related to the styling options. Below is an example:

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" />

Here is a Dojo example with Kendo latest version 2022.2.802

I hope this helps.

Regards,

Neli

Marco
Top achievements
Rank 1
commented on 08 Aug 2022, 11:11 AM | edited

Hi Neli,

Thanks for the example, but I already came to that conclusion, hence my question ;)

Kind Regards,

Marco

Neli
Telerik team
commented on 11 Aug 2022, 08:13 AM

Hi Marco,

The described appearance is expected and is not a bug. The styling options were introduced starting with 2022 R1 release. This is an ongoing effort, thus same changes between the releases are possible. 

As per your question in the initial reply - I am afraid that you weill have to add the needed classes to all the <input type="text"/> elements in your HTML.

Regards,

Neli

No answers yet. Maybe you can help?

Tags
Styling TextBox
Asked by
Marco
Top achievements
Rank 1
Share this question
or