1Password button overlaps with show/hide button

Y0z64

Couldn't find a discussion or resource for this particular problem, sorry if it's a commonly asked question.

I'm developing the frontend of a webapp and I realized in the local developer version, 1Password will overlap its button over the show/hide button in my password and confirm password input fields.

Is there anything I can do to fix this?

I'll leave a screenshot and my code attached below.

And my code:

<label for="confirm-password-field" className="relative flex justify-center items-center w-full h-16">
  <input required type={isConfirmPasswordVisible ? "text" : "password"} className={`repeat-password-input peer w-full h-full px-8 py-2 bg-gray-700 text-white bg-opacity-30 rounded-2xl border-2 border-[#384455] outline-none ${repeatPasswordInvalid ? 'invalid:text-red-500' : ''} hover:border-gray-400 duration-200 focus:border-indigo-600 `} pattern="^.{8,}"/>
    <span className={`absolute w-fit h-fit text-[#888a97] left-8 top-5 text-4 pointer-events-none duration-200 border-none 
    ${repeatPasswordInvalid ? 'peer-invalid:text-sm peer-invalid:text-indigo-600 peer-invalid:-translate-y-10 peer-invalid:-translate-x-2' : 'peer-focus:text-sm peer-focus:text-indigo-600 peer-focus:-translate-y-10 peer-focus:-translate-x-2 peer-valid:text-sm peer-valid:text-indigo-600 peer-valid:-translate-y-10 peer-valid:-translate-x-2'}`}>
      Confirm Password
    </span>
    <button className="absolute right-1 h-8 w-8 mr-4 flex items-center justify-center" onClick={toogleConfirmPasswordVisibility}>
      {isConfirmPasswordVisible? (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 fill-white">
        <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
        <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
        </svg>
      ) : (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 fill-white">
        <path d="M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" />
        <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" />
        <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" />
        </svg>
      )}
    </button>
</label>

---

1Password Version: 8.10.16
Extension Version: 2.14.1
OS Version: 6.5.3-arch1-1
Browser: Firefox

steph.giles

Hey @Y0z64,

I'm so sorry for the delay in getting back to you.

There currently isn't a way to change the positioning of the 1Password icon in a field. Ideally if a user is using 1Password to fill they won't need to reveal the password that has been filled.

I'd be happy to put in a request with our product team to see if there's a way we can give you the ability to adjust where the icon appears if you feel this would be useful?

Let us know if you have any suggestions!

DrCody

I'm not developing anything but I have this exact same issue but not only with the "view password" button but also the autofill button in Safari.

alongchamps

I'm also having this issue on my credit card's login portal. As an added bonus, 1Password won't autofill in to the password field either. Fortunately copy and paste still works.

diginja

We also had the issue but since the show/hide password button is custom (not generated by the browser), I managed to adapt the position of the button for users having 1password, using the power of the new ":has()" CSS pseudo selector with something like this:

body:has(com-1password-button) .show-password-action {
right: 40px;
}