I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye icon in the password field shifts. Here is my password field featuring an eye icon. (To view the password in text format, the user must click and hold.)
<div>
<label></label>
<input :type="show ? 'text' : 'password'" id="password" v-model="password"/>
<div class="eyeButton">
<span @mousedown="show = !show" @mouseup="show = !show" @touchstart="show = !show" @touchend="show = !show" style="cursor: pointer;">eye_icon</span>
</div>
<small class="errorMessage" v-if="password.error">Password field is required.</small>
</div>
I have excluded the line with the error message as I simplified it for this context. It doesn't affect the question but was left for you to know that there is a conditional error message present.
Additionally, I included some CSS to position the eye icon within the password input field.
.eyeButton {
position: absolute;
right: 5px;
bottom: 4px;
top: 23px;
}
Here is my query accompanied by a clear screenshot.
Despite any error message appearing below the input field, the eye icon should maintain its original look.
https://i.sstatic.net/oFLRd.png
However, when an error message is displayed on the page, the position of the eye icon changes accordingly. This is what happens;
https://i.sstatic.net/0BTLg.png
How can I adjust the placement of the eye icon to align with the input field consistently?