ASP.Net PasswordStrength Control Display Issues in Chrome and Safari - asp.net

First off, jQuery is not an option at this particular time in this project or I would just utilize that type of password strength option.
Currently I have an Ajax control toolkit control (PasswordStrength) setup to work with a textbox. The control is inside the table row/cell next to the textbox itself in which it validates. It is also setup to be a bar-type indicator that is displayed on the Right side of the textbox through the DisplayPosition property.
The strength meter appears fine in IE, Firefox and Opera ... Right next to the password field textbox and this is great. Now, in Chrome and Safari, the indicator appears at a random place on the page and if you continue typing the indicator actually moves up and down the page randomly, nowhere close to the right side of the password textbox. The indicator is technically correct on the x-axis, meaning it is "beside" the textbox, but the y-axis is sporadic and moves up and down the page, nowhere near the textbox. The behavior is the same in Chrome and Safari.
Any ideas? It's making me a bit nutty as I've tried wrapping divs, positioning, moving the control, adjusting properties etc.
Any help is greatly appreciated.
Here is the textbox and control itself as it is currently setup:
<asp:TextBox ID="txtPassword" Width="150px" runat="server"
Style="text-align: left" TextMode="Password" </asp:TextBox>
<asp:PasswordStrength ID="PS1"
runat="server"
TargetControlID="txtPassword"
DisplayPosition="RightSide"
StrengthIndicatorType="BarIndicator"
PreferredPasswordLength="16"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="1"
MinimumLowerCaseCharacters="1"
MinimumUpperCaseCharacters="1"
RequiresUpperAndLowerCaseCharacters="false"
CalculationWeightings="50;15;15;20"
TextStrengthDescriptionStyles="barRed;barYellow;barBlue;barGreen"
Enabled="true"
BarBorderCssClass="barBorder"
BarIndicatorCssClass="barInternal">
</asp:PasswordStrength>
Any help or suggestions would be greatly appreciated!

Related

AutoComplete Extender - Scroll bar causes results to close?

I have had a website running using a textbox, autocomplete extender, and autocompletedropdownpanel. Basically when a user starts typing a name into the text box the results appear in a few seconds. Since there can be hundreds of rows I need a scroll bar. Then the use just selects the name. For some reason, it is now broken (maybe update with IE? as it works fine in Chrome) Now when a user uses the scroll bar it automatically closes the results and is unable to make a selection. I have not been able to find a solution on the web for this. Is there an updated ajax kit I need to use? If so how do I go about replacing it? Or is there something to my code I can add or change?
Update: I found that this issue only appears on Surface Pro tablets. So something with IE11 and being a tablet causes this. Even though the tablet is docked with a normal keyboard and mouse.
Is it possible to use a cancelBubble function for a dropdownpanel with scroll bars? I have an issue where when clicking on the scroll bar to scroll threw rows once the mouse is released the results close. From reading I think I need some sort of cancelBubble event or stop propagation
<asp:Panel ID="autocompleteDropDownPanel" runat="server"
ScrollBars="Auto" Height="200px" Font-Size="Medium"
HorizontalAlign="Left" Wrap="False" />
<asp:AutoCompleteExtender ID="AutoCompleteExtender" runat="server"
DelimiterCharacters="" Enabled="True" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList" TargetControlID="DoctorNameTextBox"
UseContextKey="true" ContextKey="StateDropDown"
CompletionListElementID="autocompleteDropDownPanel"
onclientitemselected="getSelected"
ShowOnlyCurrentWordInCompletionListItem="True" CompletionInterval="100"
MinimumPrefixLength="2">
</asp:AutoCompleteExtender>
Just edit the css of the class.
Overflow: Auto;
Height: 60px;
If this doesnt work , then try following:
Set AutoPostBack=false.
If the AutoCompleteExtender functionality is gone by setting AutoPostBack=false , then by Using the OnClientItemSelected property I could call a javascript function that triggered a postback.

AJAXControlToolkit MaskedEditExtender behavior

I am referencing the latest AJAXControlToolkit in my ASP.Net 4.0.xxx WebForm application. I am using the extender to format a phone number field as follows. If the field is left empty then I don't need any mask showing up. But if the phone number is entered then I don't want the mask to disappear when tabbed away from that field, but this is exactly whats happening. The hyphens in the mask disappear and only numbers are left in the field. How can I prevent this from happening?
<asp:TextBox ID="Contact_HomePhone" runat="server" MaxLength="50"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender
Mask="999-999-9999" MaskType="Number" ClearMaskOnLostFocus="True"
ID="Contact_HomePhone_MaskedEditExtender" runat="server" TargetControlID="Contact_HomePhone" />
Thanks.
I am going with jQuery MaskedInput code and it is working exactly as I wanted and even more.
Thanks for all the feedback!

AjaxControlToolkit Calendar postioning relative to popup image and not the textbox

Hi I am using an AjaxControlToolkit Calander control. But as per my requirements I have to split the selected date into separate textboxes for date month and year. So I have used a textbox say "textbox1" which have an popupimage button for the ajax control calander.
I make the textBox1 hidden with css and have autopostback set to true. On the text change event I split the date string and put it in separate textboxes as desired.
Everything is working fine except for the positioning of the Calander control. When I hide the main textbox control the calander positions itself on the top left side of the screen and not near the popimage. How can I fix that.
It will surely have an abnormal behavior if you try to attach a calendar control on a hidden TextBox. Instead of hiding the textbox, make it look like hidden but not literally hidden.
for example
<asp:TextBox ID="textBox1" runat="server" style="border:0 none Transparent;margin:0;width:0;background-color:Transparent" ReadOnly="true" />
Thanks to the answer above just a slight modification is needed to make it the correct answer.
<asp:TextBox ID="textBox1" runat="server" style="border:0 none Transparent;margin:0;width:0;background-color:Transparent" />

drop down list appears in front of my calender in asp.net

Drop Down list comes in front of all the controls. I have a calander extender for the text box which is right above(top) the drop down. when the calender pop's out it goes under i.e behind the drop down. Any solution friends.
How about posting some code/markup?
It wont like it via the google intellisense but you need to add the following to your DropDownList markup:
<asp:TextBox runat="server" id="TextBox1" autocomplete="off" />
By default if asp.net finds an attribute that it doesnt recognise then it simply passes it through into the underlying html that is generated.
Note 1: There is some kind of AutoComplete setting for this control but this doesnt do what you need it to do, you need the lowercase version like I have stated above.
Note 2: This is a non-standard attribute. It works in FF and IE but it will cause your validation to fail if you run it through the w3c checker.

Regular input in ASP.NET

Here's an example of a regular standard HTML input for my radiobuttonlist:
<label><input type="radio" name="rbRSelectionGroup" checked value="0" />None</label>
<asp:Repeater ID="rptRsOptions" runat="server">
<ItemTemplate>
<div>
<label><input type="radio" name="rbRSelectionGroup" value='<%# ((RItem)Container.DataItem).Id %>' /><%# ((RItem)Container.DataItem).Name %></label>
</div>
</ItemTemplate>
</asp:Repeater>
I removed some stuff for this thread, one being I put an r for some name that I do not want to expose here so just an fyi.
Now, I would assume that this would or should happen:
Page loads the first time, the None radio button is checked / defaulted
I go and select a different radiobutton in this radiobutton list
I do an F5 refresh in my browser
The None radio button is pre-selected again after it has come back from the refresh
but #4 is not happening. It's retaining the radiobutton that I selected in #2 and I don't know why. I mean in regular HTML it's stateless. So what could be holding this value? I want this to act like a normal input button.
I know the question of "why not use an ASP.NET control" will come up. Well there are 2 reasons:
The stupid radiobuttonlist bug that everyone knows about
I just want to brush up more on standard input tags
We are not moving to MVC so this is as close as I'll get and it's ok, because the rest of the team is on par with having mixed ASP.NET controls with standard HTML controls in our pages
Anyway my main question here is I'm surprised that it's retaining the change in selection after postback.
This is a Firefox behavior.
Firefox will persist form values when you reload a webpage.
For example, if you go to StackOverflow's Ask Question page, enter some text, and reload the page, Firefox will remember the text, but IE will not.
If you re-request the page (as opposed to refreshing it) by pressing Enter in the address bar, the form will not be persisted.

Resources