Input field suggessions are not showing properly on firefox
Monica
I am using email input field, for forgot password password. But on Firefox it is not showing properly.
I am using below code
<div class="mainB">
<div class="centerBlock">
<form method="post">
<div class="alignText">
Enter Email Address:
<input type="email" name="userEmail" required="required"
pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"
maxlength="45" id="forgotPassTextField" />
<br>
<br>
</div>
<div id="alignCenter">
<button class="btn mt-15 btn-default btn-custom" type="submit">
Ok
</button>
<button class="btn mt-15 btn-default btn-custom" type="button"
onclick="">
Cancel
</button>
</div>
</form>
The suggestions are showing at the bottom of the page and text field is at the top of page:
MY CSS as follows:
.alignText {
margin-left: 52px;
text-align: left;
}
#forgotPassTextField {
width: 252px;
}
#alignCenter {
text-align: center;
}
.mainB {
height: 585px;
position: absolute;
width: 100%;
}
.centerBlock {
background-color: #FFFFFF;
box-shadow: 1px 1px 10px #000000;
height: 230px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
width: 500px;
}
Jukka K. Korpela
The problem with the “suggestions” box (the box that appears suggesting some previously entered value when you type something that matches the start of such a value) is that it is under the control of the browser. There is no specification on it and not much public documentation either.
In this case, that box is displayed because the input element is inside an element (the div with class centerBlock) on which a CSS transformation is applied, namely a simple translation in the y direction. It seems that Firefox gets confused and thinks that the input element is placed in a location where it would be without the transformation.
Thus, the fix is to remove transform: translateY(-50%);. For positioning the element, it is better to place it at the right place otherwise. In this case, it is relatively positioned, so you would just need to replace top: 50%; by top: calc(50% - 115px);. The value 115px is 50% of the height of the div element.
The calc construct is not supported by IE 8 or earlier, but neither is transform.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to prevent zooming in popup window in my Chrome Extension
- Next: how i pass nested json array object in angular js google map
Related
Related Related
- 1
Not showing placeholder for input type="date" field
- 2
Input field showing different size in iOS
- 3
Input search field doent work properly on mobile version of responsive site
- 4
Blinking Caret Not Showing up in Input Text Field
- 5
Spanish text is not displayed properly when value is set to input field
- 6
Hidden input field not being updated properly
- 7
Password input field showing value
- 8
google+ follow button not showing properly in bootstrap modal in firefox
- 9
input field showing an URL with quotes
- 10
input field always prompts for input rather than showing placeholder text
- 11
JQuery datepicker month dropdown border not showing properly in firefox
- 12
Properly filtering an input field in Angular
- 13
Showing a hidden button based on the fill-up event of an input field
- 14
Showing next input field when filled in using next()
- 15
firefox: input field color
- 16
Input field and gldatepicker showing gap
- 17
jQuery on click no focus on readonly input field (in Firefox)
- 18
strange gap between input field in firefox
- 19
Input field showing different size in iOS
- 20
Input search field doent work properly on mobile version of responsive site
- 21
Input field strange behaviour in Firefox (transparent text)
- 22
HTML Symbol code not working in input field properly
- 23
textAngular input field showing? Why?
- 24
How to properly disable and enable input field by option in HTML & JQUERY
- 25
Why an input field is not displaying properly in Chrome?
- 26
Text input not showing in Firefox.
- 27
Bootstrap table border not showing properly in firefox
- 28
Input field wide not working properly
- 29
Equality comparison of the input field value not working properly
Comments