Input overlay misaligns on resize + solution

Hi all.

I have been trying out 1password X and saw that the button overlay doesn't move with the input when changing viewport width.

I would suggest the following, wrapping the button inside of a relative parent with 100% width, and use "right" for horizontal positioning on the button instead of "margin-left".

<div style="
    position: relative;
    width: 100%;
">
    <op-button data-op-target="5" data-state="active" class="op-large" style="
        /* margin-left: 411px; */
        margin-top: 9.5px;
        right: 12px;
    "></op-button>
</div>

Keep up the good work


1Password Version: Not Provided
Extension Version: 1.6
OS Version: Not Provided
Sync Type: Not Provided

Comments

  • brentybrenty

    Team Member

    @nilin: Hmm. Thanks for getting in touch. This is interesting! You're half right: sometimes it doesn't reposition itself, but other times it does. It seems to depend on the way the page is coded. For example, take a look here:

    https://mail.protonmail.com/login

    Fun screen-is, you'll probably notice that the 1Password X icon does maintain a position at the right edge of the field even when resizing. But if you make the window narrow enough, the page layout changes, and then it displays the behaviour you're talking about. This happens in both Firefox and Chrome. I'm not sure if there's a good solution to this, but certainly it will be fun to find out. And in the mean time, just reloading the page should have 1Password X reposition itself based on the current layout. Thank you for bringing this up! :)

    ref: b5x-392

This discussion has been closed.