This is a migrated thread and some comments may be shown as answers.

Html.Kendo().TextBoxFor() is putting input in a span

9 Answers 7415 Views

TextBox

This is a migrated thread and some comments may be shown as answers.

Daniel asked on 17 Dec 2020, 12:28 PM

unbenannt.jpg

unbenannt2.jpg

Hey guys,

I have this code in my .cshtml:

<form>

<div class="form-row col-12">

<div class="form-group col-12">

@Html.Label("Ersteller")

@Html.Kendo().TextBox().Name("test").HtmlAttributes(new { @class = "form-control", @readonly = "readonly" }).Value("Daniel Sander")

</div>

</form>

When the view is rendered, I get a Textbox looking like attachement picture 1. Also, when using the textbox without the readonly attribute, you can see like the textbox is getting a wrong focus-area like in attachement picture 2.

<form>

<div class="form-row col-12">

<div class="form-group col-12">

<label for="Ersteller">Ersteller</label>

<span class="k-widget k-textbox form-control" style="">

<input class="form-control k-input" id="test" name="test" value="Daniel Sander" data-role="textbox" aria-disabled="false" autocomplete="off" style="width: 100%;">

</span>

<script>kendo.syncReady(function(){jQuery("#test").kendoTextBox({"value":"Daniel Sander"});});</script>

</div>

</form>

I've realized, that my textbox is rendered in a span-element. However, in Kendo version 2020.1.219.545 this was definitely not the case. After the update to 2020.3.1021.545 a few weeks ago this "bug" happend. Today I've updated to 2020.3.1118.545 but still the same problem.

When analyzing the css, which causes the problem, you see:

.k-textbox.form-control {

padding: .375rem .75rem;

}

The padding causes the space between the focus-area. So my question is now, did I have implemented something wrong now? Is this behaviour the way it should be? How is your recommendation for implementing a label with a textbox via MVC Razor syntax in the current kendo version without this padding-space?

9 Answers, 1 is accepted

Accepted

answered on 21 Dec 2020, 09:02 AM

Hello Daniel,

The TextBox is a relatively new component introduced with the Kendo UI R2 release. However, the ThemeBuilder has still not been updated to use it but instead uses an HTML input with a CSS class .k-textbox.

The problem you are referring to is a known one and will be handled with priority. You can track it at the below link:

https://github.com/telerik/kendo-ui-core/issues/6099

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

answered on 25 Jan 2021, 10:46 AM

Should this be fixed in the release version 2021.1.119? Because I've updated the project and it's still the case like before. And yes, I've deleted the browser cache etc.

It happens also with the default bootstrap style "<link href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />", so not only with custom kendo nordic style of the themebuilder.

answered on 27 Jan 2021, 09:58 AM

TextBoxSample.zip

Hi Daniel,

The duplicate TextBox border problem has been fixed with the last Kendo UI R1 2021 release.

Please make sure that the upgrade process was successful. To do this, verify that:

1) The script and style references of the new version are referenced in the _Layout.cshtml

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My Telerik MVC Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.aspnetmvc.min.js"></script>

@* Add the bootstrap.min.js script: *@
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>

2) The new Kendo.Mvc.dll version is referenced in the project References.1

In case this does not help please prepare and share a sample runnable page that clearly replicates and isolates the problem. Examining this page locally will help me fully understand the case and allow me to advise further. Feel free to modify the sample project I am attaching to my reply, which renders the TextBox correctly with the latest Kendo UI version.

Regards,
Nikolay
Progress Telerik

Accepted

answered on 29 Jan 2021, 02:43 PM

Hello Daniel,

Thank you very much for following up.

The following two:

@Html.Kendo().TextBox().Name("test").HtmlAttributes(new { @class = "form-control", style = "width: 10%;" }).Value("Daniel Sander")

<input class="k-textbox form-control" style = "width: 10%;" />

Reder differently:

The new TextBox holds the input wrapped in a span and the form-control class is appended to it (via .HtmlAttributes) and not directly to the input.

Please note that using custom classes (in this case bootstrap ones) may interfere with the Kendo UI styles and we recommend refraining from doing so.

Regards,
Nikolay
Progress Telerik

answered on 17 Feb 2021, 09:27 PM

Maybe will help someone, I did the following workaround:

1) Define validation in your view model

[Required]
[Display(Name="First Name")]
public string FirstName { get; set; }

2) In your view use Kendo Html Helper and important: specify form-control and p-0 => zero padding, e.g.

@Html.Kendo().TextBoxFor(m=>m.FirstName).HtmlAttributes(new{@class= "form-control p-0" })

3) add this in your css (because in step2 we are removing double border from from-control and kendo input as well (unwanted behavior). In step 3 we are restoring proper padding for kendo input only.
.form-control {
.k-input {
padding: .375rem .75rem !important;//fix for double border
}
}