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

RadTextBox in Password mode, Icon in Internet Explorer

8 Answers 185 Views
Input
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 30 Aug 2016, 09:13 PM

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

 

8 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 31 Aug 2016, 09:28 AM
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.
0
Keith
Top achievements
Rank 1
answered on 31 Aug 2016, 12:09 PM

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

0
Viktor Tachev
Telerik team
answered on 01 Sep 2016, 01:23 PM
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.
0
Keith
Top achievements
Rank 1
answered on 01 Sep 2016, 01:35 PM

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

0
Viktor Tachev
Telerik team
answered on 02 Sep 2016, 01:56 PM
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.
0
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 09 Sep 2019, 08:07 PM
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.  
0
Peter Milchev
Telerik team
answered on 12 Sep 2019, 11:10 AM

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.
0
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 12 Sep 2019, 02:20 PM
That worked perfect.  Thank you!
Tags
Input
Asked by
Keith
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Keith
Top achievements
Rank 1
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
Peter Milchev
Telerik team
Share this question
or