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> </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> </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
Rank 3
Iron
Iron
Iron
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:
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/.
Rank 3
Iron
Iron
Iron
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.
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>
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
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/.
Rank 3
Iron
Iron
Iron
You've missed to insert the 'form-control' class into your input:
@Html.Kendo().TextBox().Name("test").HtmlAttributes(new { @class = "form-control", style = "width: 20%;" }).Value("Daniel Sander")
This class is again causing the same problem. I know, it is a bootstrap specific class but I've used it without any issues till this problem appeared.
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
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/.
Rank 3
Iron
Iron
Iron
I know, so the pretty popular bootstrap class 'form-control' isn't anymore compatible with the razor rendering for a kendo textbox. Unfortunately with the version '2020.1.219' it was still working..
alright then, thanks for pointing out.
Rank 1
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
}
}
Rank 3
Iron
Iron
Iron