Adding icons to Kendo textbox

[Responsive]

Is there a way to display a k-icon inside a Kendo textbox? For example, displaying the k-i-email in a Kendo textbox for an email address.

[Silviya Stoyanova]

Hello,

I would suggest following the approach demonstrated in this forum thread:

• https://www.telerik.com/forums/add-icon-to-an-existing-textbox

I hope that helps.

Kind Regards,
Silviya Stoyanova
Progress Telerik

[Responsive]

Thanks, but I already tried applying this to my situation with no luck.

I would like to use Kendo icons and Kendo text box controls. The best I can get it to do with a standard Razor textbox is a tiny icon crammed into a corner. With a Kendo control, the same tiny icon remains outside the textbox.

[Tsvetomir]

Hi,

My name is Tsvetomir and I will continue the communication over this thread. 

Indeed, the conventional TextBox HtmlHelper differs from the Kendo UI TextBox widget. I have tweaked the example from the referenced forum thread and it appears that the icon is positioned within the scope of the TextBox. Here is the updated markup:

<form style="width: 500px;">
    <div class="form-group has-success has-feedback">
        @(Html.Kendo().TextBox().Name("name").HtmlAttributes(new { @class = "form-control", style="width:100%", @placeholder = "Email Address" }))
        <span id="casd" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    </div>
</form>

 

Regards,
Tsvetomir
Progress Telerik

[Responsive]

The code below, renders a text box as per the attached image.

I should also point out that the default bootstrap-v4 Kendo theme is applied and Bootstrap 4.5.2 and Font Awesome 5.7.0 are referenced.

What am I missing?

<form style="width: 500px;">
    <div class="form-group">
        <div class="input-group">
            @(Html.Kendo().TextBox().Name("name").HtmlAttributes(new { @class = "form-control", style="width:100%", @placeholder = "Email Address" }))
            <span aria-hidden="true"><i class="fas fa-lock"></i></span>
        </div>
    </div>
</form>

[Tsvetomir]

Hi,

Adding the form-control-feedback class to the span containing the icon should resolve the positioning issue:

<form style="width: 500px;">
    <div class="form-group">
        <div class="input-group">
            @(Html.Kendo().TextBox().Name("name").HtmlAttributes(new { @class = "form-control", style="width:100%", @placeholder = "Email Address" }))
            <span aria-hidden="true"  class="form-control-feedback"><i class="fas fa-lock"></i></span>
        </div>
    </div>
</form>

 

Regards,
Tsvetomir
Progress Telerik