Input overlay misaligns on resize + solution

nilin · April 2018

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

AGAlumB · April 2018

@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

Input overlay misaligns on resize + solution

Comments