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

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

9 Answers 1399 Views
TextBox
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
Daniel asked on 17 Dec 2020, 12:28 PM

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

Sort by
0
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
answered on 17 Dec 2020, 12:36 PM
Also, I looked in the themebuilder (because I'm using the bootstrap nordic design: https://themebuilder.telerik.com/kendo-ui) and at the area, where you can see a form with bootstrap framework there are also no span-elements around the inputs. 
0
Accepted
Nikolay
Telerik team
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:

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/.

0
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
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.

0
Nikolay
Telerik team
answered on 27 Jan 2021, 09:58 AM

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

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/.

0
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
answered on 28 Jan 2021, 08:46 AM

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.

0
Accepted
Nikolay
Telerik team
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

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/.

0
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
answered on 29 Jan 2021, 02:52 PM

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.

0
Michael
Top achievements
Rank 1
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
    }
}

 

0
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
answered on 18 Feb 2021, 07:58 AM
Seems interesting, will try it out later on. Thanks!
Tags
TextBox
Asked by
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Daniel
Top achievements
Rank 1
Iron
Iron
Iron
Nikolay
Telerik team
Michael
Top achievements
Rank 1
Share this question
or