Add icon to an existing textbox

6 posts, 0 answers
  1. Alex
    Alex avatar
    76 posts
    Member since:
    May 2015

    Posted 27 Apr 2018 Link to this post

    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?
  2. Dimitar
    Admin
    Dimitar avatar
    786 posts

    Posted 01 May 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alex
    Alex avatar
    76 posts
    Member since:
    May 2015

    Posted 01 May 2018 Link to this post

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

     

     

  4. Dimitar
    Admin
    Dimitar avatar
    786 posts

    Posted 02 May 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Dan
    Dan avatar
    167 posts
    Member since:
    Nov 2017

    Posted 29 Jan 2019 in reply to Dimitar Link to this post

    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"

  6. Dimitar
    Admin
    Dimitar avatar
    786 posts

    Posted 31 Jan 2019 Link to this post

    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
    Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top