RadTextBox in Password mode, Icon in Internet Explorer

9 posts, 0 answers
  1. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 30 Aug 2016 Link to this post

    I am trying to use a RadTextBox with TextMode="Password".

    When I was testing it in Internet Explorer version 11 under Windows 7, there is a weird icon that shows up when typing something in the RadTextBox.

    Attached is a screenshot with the icon circled in RED.

    When you click on the icon and hold the mouse button, it shows the text of the password.

    I have tested on Chrome and Firefox and no icon appears in the RadTextBox.

    Is there any way to prevent that icon from appearing?

    Please help!

    Sincerely,

    Keith Jackson

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2405 posts

    Posted 31 Aug 2016 Link to this post

    Hi Keith,

    This button is specific to Internet Explorer only. The same applies also to the clear button that is displayed in input elements.

    In order to remove the button you can use a bit of CSS. You need to ensure that the -ms-reveal pseudo-element is not visible. Please check out the following stackoverflow article that describes the approach in more detail.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 31 Aug 2016 in reply to Viktor Tachev Link to this post

    Thank Viktor!

    The funny thing is that this has never come up in Internet Explorer when using an ASP TextBox in Password mode.  It only shows up with RadTextBox.  What makes the RadTextBox different than the ASP TextBox?

    Sincerely,

    Keith Jackson

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2405 posts

    Posted 01 Sep 2016 Link to this post

    Hi Keith,

    This behavior is not related to the RadTextBox control. The icon is entirely Internet Explorer feature. The browser adds this to any input element with type password.

    You can test the behavior by adding a regular input element and TextBox control with their type property set to password. Check out the following video as illustration.


    In the code snippet below you can see the code I used for testing.


    Input element: <input id="input1" type="password" />
    <br />
    ASP.NET TextBox: <asp:TextBox ID="TextBox1" runat="server" TextMode="Password" />
    <br />
    RadTextBox: <telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="Password"></telerik:RadTextBox>


    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 01 Sep 2016 in reply to Viktor Tachev Link to this post

    I was using a regular TextBox with TextMode="Password" on my login page before I changed it to a RadTextBox and never saw that icon show up.  I am always testing in Internet Explorer since the company I work for mostly uses Internet Explorer.  I do test in Chrome and Firefox too.  I did see the X display in a regular TextBox in Internet Explorer but I am not concerned with that.

    I changed to RadTextBox since it is more mobile friendly and that I am working on changing our web site to be more mobile friendly.

    Anyways, the link you provided helped provide a way to prevent that icon from appearing.

    Thanks!

    Sincerely,

    Keith Jackson

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2405 posts

    Posted 02 Sep 2016 Link to this post

    Hi Keith,

    I am glad that the suggested approach is working for you. Let me know if you need further assistance.

    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. SSirica
    SSirica avatar
    88 posts
    Member since:
    Jan 2007

    Posted 09 Sep 2019 Link to this post

    I have the opposite problem...I would like a show password button to show up in Chrome.  I found this https://www.telerik.com/support/kb/aspnet-ajax/textbox/details/showpassword-button-for-radtextbox-with-textmode-password but the eye doesn't display in the correct location.  It shows up in the middle of the browser page floating right.  
  8. Peter Milchev
    Admin
    Peter Milchev avatar
    656 posts

    Posted 12 Sep 2019 Link to this post

    Hello SSirica,

    The issue is that the Classic render mode is used. With that said, there are two options to fix that: 

    1) Set all controls to render mode Lightweight

    2) Set position: relative for the wrapper of the input:

    .riSingle.RadInput{
        position:relative
    }

    Regards,
    Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. SSirica
    SSirica avatar
    88 posts
    Member since:
    Jan 2007

    Posted 12 Sep 2019 in reply to Peter Milchev Link to this post

    That worked perfect.  Thank you!
Back to Top