Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x/pkgsite: <input class="DetailsHeader-pathInput"> element is floating strangely #38162

Closed
dmitshur opened this issue Mar 30, 2020 · 6 comments
Closed

Comments

@dmitshur
Copy link
Member

@dmitshur dmitshur commented Mar 30, 2020

What is the URL of the page with the issue?

https://pkg.go.dev/cmd/link?tab=doc

What is your user agent?

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

Screenshot

image

What did you do?

I visited the page.

What did you expect to see?

A consistent page background.

What did you see instead?

An <input> element floating strangely on the left hand side.

Its CSS properties are:

left: -62rem;
position: absolute;
top: 62rem;

This might be related to #36809.

/cc @jba @julieqiu

@dmitshur dmitshur added this to the Unreleased milestone Mar 30, 2020
@jba jba self-assigned this Mar 30, 2020
@jba
Copy link
Contributor

@jba jba commented Mar 30, 2020

An input element is needed to support copying to the clipboard. (Unless it isn't. That would be nice. But as far as I know it is.)

I had to put that element somewhere. I guess I didn't put it far enough away.

@dmitshur
Copy link
Member Author

@dmitshur dmitshur commented Mar 30, 2020

Do you know if making its opacity 0 is a viable alternative?

@jba jba removed their assignment Mar 31, 2020
@dmitshur dmitshur added NeedsFix and removed NeedsInvestigation labels Apr 2, 2020
@julieqiu julieqiu changed the title go.dev: <input class="DetailsHeader-pathInput"> element is floating strangely x/pkgsite: <input class="DetailsHeader-pathInput"> element is floating strangely Jun 15, 2020
@nyaa8
Copy link

@nyaa8 nyaa8 commented Jun 17, 2020

An input element is needed to support copying to the clipboard. (Unless it isn't. That would be nice. But as far as I know it is.)

I had to put that element somewhere. I guess I didn't put it far enough away.

Hello!

There is Clipboard API but it requires permission from Permissions API. Unfortunately, Internet Explorer doesn't support this at all.

Clipboard API compatibility chart:
Chart 1

Permissions API compatibility chart:
Chart 2

Thank you 🙇‍♀️

@gopherbot
Copy link

@gopherbot gopherbot commented Jun 17, 2020

Change https://golang.org/cl/238477 mentions this issue: content/static/css: hide pathInput element on larger displays

@nyaa8
Copy link

@nyaa8 nyaa8 commented Jun 17, 2020

Tested the change on 3840 x 2160 px display:
4k

And on 1920 x 1080 px display:
fhd

I just changed -62rem to -50vw, so it should always "hide" correctly:

.DetailsHeader-pathInput {
  /*
   * An input element that can be selected so its contents can be
   * copied to the clipboard. We can't use a hidden element, so
   * put this visible one very far off the screen.
   */
  left: -50vw;
  position: absolute;
  top: 62rem;
}

Maybe top should be changed as well (to e.g. 50vh)?

Thank you for your time 🙇‍♀️

@julieqiu
Copy link
Contributor

@julieqiu julieqiu commented Jun 17, 2020

Thank you, @nyaascii!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants