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
Labels
FrozenDueToAge help wanted NeedsFix The path to resolution is known, but the work has not been done. pkgsite
Milestone

Comments

@dmitshur
Copy link
Contributor

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 NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. pkgsite labels Mar 30, 2020
@dmitshur dmitshur added this to the Unreleased milestone Mar 30, 2020
@jba jba self-assigned this Mar 30, 2020
@jba
Copy link
Contributor

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
Contributor Author

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 The path to resolution is known, but the work has not been done. and removed NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. 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 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

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

@nyaa8
Copy link

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
Member

Thank you, @nyaascii!

@golang golang locked and limited conversation to collaborators Jun 17, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
FrozenDueToAge help wanted NeedsFix The path to resolution is known, but the work has not been done. pkgsite
Projects
None yet
Development

No branches or pull requests

5 participants