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

[Marco]

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]

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]

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]

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]

Hi Neli,

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

Kind Regards,

Marco

[Neli]

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

[dinesh]

Hi @marco,
Can you please tell me what fix you applied?
I'm facing the same issue

[Marco]

@dinesh,

I added the css class k-input-solid by applying a global replace within my source code.

Good luck!

Kind Regards,

Marco