Add icon to an existing textbox

[Alex]

I want to add a clickable icon to the end of a textbox, I'm using the razor so I don't want to create the textbox via normal html, I want to use the razor helpers. How can I add the icon to the end of the textbox programmatically with javascript or jquery?

[Dimitar]

Hello Alex,

In case you are using the default application template, where bootstrap is included, you could achieve adding an icon at the end of an input as follows:

<div class="form-group has-success has-feedback">
@(Html.TextBox("name", null, new { @class = "form-control", @placeholder = "Email Address" }))
<span id="casd" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

<style>
.form-control-feedback {
pointer-events: inherit;
}
</style>

<script>
$(document).ready(function () {
$("#casd").click(function () {
alert("test");
});
});
</script>

Alternatively, you could use the jQuery append() method to dynamically append an element that will be used for the icon the the container of the textbox, but note that this will produce exactly the same result (html markup) as the one shown above.

Regards,
Dimitar
Progress Telerik

[Alex]

Sorry I don't think I explained myself well enough. I want the icon to appear inside the textbox (see attached).

 

 

[Dimitar]

Hello Alex,

The suggested approach in my previous reply will display the specified icon inside the input element. I am attaching an ASP.NET MVC solution, where this is demonstrated.

In general, to achieving the desired functionality, a DOM element has to be placed on the page (preferably in the same container as the input). Then, the added element has to be positioned to appear inside the input with CSS. 

Regards,
Dimitar
Progress Telerik

[Dan]

Hi Dimitar,

I tried to implement your solution using a telerik icon but I can not seem to do it.

How can I achieve the same result as the attached project but using a telerik icon for instance use "k-icon k-i-search"

[Dimitar]

Hi Dan,

If you would like to use a k-icon class the styles have to be tweaked a bit:

<style>
    .k-icon.form-control-feedback {
        position: absolute;
        width: 34px;
        height: 34px;
    }
</style>

Regards,
Dimitar
Progress Telerik