Develop Reference

Edge browser populating multiple textboxes

I'm having some problems with textboxes in Edge browser. When I click on a textbox (regular <input type="text"), it shows some options I entered before. That's fine but when I select one, other textboxes gets affected. Here is a screenshot:
You see in this image, in the modal div, I selected Notebook and the textbox at the background also changed. They have different name and id attributes and also I haven't even picked anything yet on the modal, just hovering on the items in the dropdown already affects the textbox at the background.
What could be causing this? I've already checked several times that they have different attributes. Here is their markup:
This is for the modal:
<div styleName="field-container">
<label className={classes.label} htmlFor="termName">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="termName" id="termName" required autoFocus autoComplete="off" />
</div>
This is for the background:
<div styleName="field-container">
<label className={classes.label} htmlFor="name">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="name" id="name" required autoFocus autoComplete="off" />
</div>
This Edge dropdown show "Manage Personal Info..." at the bottom by the way.

How to handle different input types bound to same ng-model?

In a page, I have a section for date-range selection. A large portion of our user base is IE 10/11, which does not support input type="date". I'm using Modernizr to show/hide the date input based on the support, and when not, provide an input of type="text", both bound to the same ng-model. Typing into the text spams the console with errors, as the text and date are incompatible. Is there a way to fix this console spam? Using a third-party library is not an option.
<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
<label>From</label>
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>

Change your ng-show to ng-if like this:
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
You're getting the error because it's binding to the the first input's model, which is a date input. ng-show just uses CSS to hide the element but it still exists in the DOM. ng-if, however, completely removes it from the DOM, leaving you with one ng-model="searchFromDate"

Set Error Div positioning on left side of textfield - Jquery Validation Engine

I am using Jquery Validation Engine.
http://www.position-relative.net/creation/formValidator/
It shows error messages on the right side of each textfield.
How can I set it to the left side for a specific textfield?
I have 4 fields i.e name, email,phone,password.
I want to show error div on left side for email textfield.
How to do this ?

You can set the position directly in the element or you can also customize the position by setting the data-prompt-position. See the fiddle.
you can set the position like the following also. This is mentioned in their documentation:
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft:70" />
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft:20,5" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight:-100,3" />
You can also refer the demo of Positioning here http://www.jqueryrain.com/?_VzOqXOT

jquery toggle between password and text field IE bug

I am using this jquery from the link below for login toggle between password and text field
http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/
I am testing on IE and basically when you toggle the password field (the username is fine), the input field goes smaller on focus, which really annoys me and spent last hour trying to figure it out, but couldn't so would like to ask for help if you can help me please
Thanks a lot in advance

So in looking at that example it looks like it's switching between showing and hiding the following password fields:
<input id="password-clear" type="text" value="Password" autocomplete="off" />
<input id="password-password" type="password" name="password" value="" autocomplete="off" />
I'm thinking that the height and width of the 2 inputs (password-clear and password-password) are different in your code, hence when you show one it is a different size. Make sure the CSS you are applying to both inputs is identical.
Update:
It seems IE is rendering some space from the input that's being hidden (pushing the other fields down). I fixed it in this fiddle by making both the password fields absolutely positioned and adding some separational divs.
http://jsfiddle.net/LqXnx/5/

How to set the width of a text input field in a form to a percentage of page width?

I am trying to set the width of a text input field as a percentage of total page width, as follows:
<input type="text" id="url" NAME="otherSite" size="70%" value=""/>
This doesn't seem to work. It seems I can specify the width of an input field only in absolute terms.
Short of going to javascript, is there any simple way? I am trying to have it look good both on desktop and mobile, where the windows are likely to be of very different size.

Use the style attribute:
<input type="text" id="url" NAME="otherSite" style="width:70%" value=""/>
You also might want to read up on CSS (Cascading Style Sheets).