Signing back into the Community for the first time? You'll need to reset your password to access your account.  Find out more.

Forum Discussion

Former Member's avatar
Former Member
2 years ago

1password button/icon misaligned from text field

Hello! A problem with a workaround here, for any other lost wanderers facing a similar issue.

The problem

I'm developing a new interface for account management and we noticed that the 1password button/icon for autocomplete is way misaligned on Chrome on Mac:

Expectation

The 1password icon should be aligned with the text field.

Observations

  • the distance between the 1password button/icon and the text input field increases if I scroll down the page
    • e.g. if I zoom way out so the whole page is in view, the 1password button is aligned
    • but if I zoom normally, scroll down and then focus on the input, the icon appears higher up on the page and further away from the input.
  • It appears to have something to do with container-type: inline-size; which is used on the <body> tag.

The code for the input itself is simple enough:

<input class="input input-text" data-action="input->profile#onInputChange" data-profile-target="input" name="name" type="text" value="John Doe">

The code for the rest of the site of relevance:
<body class="profile-personal-details">


.profile-personal-details {
...
container-type: inline-size;
...
}

The workaround

For us, the fix is simply to move the container-type: inline-size; property off of the <body> tag and into an element immediately below it.

Bug

I do feel this does still represent a small bug in the browser extension too as it should be able to handle this use of container queries.

According to the formal definition, container-type applies to all elements.

Couple of other links on container type:
* https://drafts.csswg.org/css-contain-3/#query-container
* https://drafts.csswg.org/css-contain-3/#container-type

Thanks!

1Password Version: 1Password for Mac 8.10.18 (81018040)
Extension Version: 2.16.0
OS Version: Mac os 14.0
Browser: Chrome 118.0.5993.96

browser extension
No Replies