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.

Sign up for GitHub

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

Jump to bottom

Bug: Color picker sometimes goes off top of screen #57

Closed
personalizedrefrigerator opened this issue Aug 10, 2022 · 7 comments
Closed

Bug: Color picker sometimes goes off top of screen #57

personalizedrefrigerator opened this issue Aug 10, 2022 · 7 comments
Assignees
@mdbassit
Labels
enhancement New feature or request

Comments

@personalizedrefrigerator
Copy link

personalizedrefrigerator commented Aug 10, 2022 •
edited

Summary

The color picker goes off the top of the screen when there isn't enough space for it below the input.

For example, with the configuration

Coloris({
	el: '.coloris_input',
	format: 'hex',
	selectInput: false,
	focusInput: false,
	themeMode: this.editor.lightMode ? 'light' : 'dark',
	
	swatches: [
		Color4.red.toHexString(),
		Color4.purple.toHexString(),
		Color4.blue.toHexString(),
		Color4.yellow.toHexString(),
		Color4.green.toHexString(),
		Color4.clay.toHexString(),
		Color4.black.toHexString(),
		Color4.white.toHexString(),
	],
});

I get,
Screenshot of the color picker overflowing the top of the screen
and
screenshot of phone in landscape mode, color picker not overflowing

Expected Behavior

The color picker should go below the input.
@mdbassit mdbassit added the enhancement New feature or request label Aug 11, 2022
@mdbassit mdbassit self-assigned this Aug 11, 2022
@mdbassit
Copy link
Owner

I'm not sure what you mean by making the color picker scroll.
What I can do now is to position the color picker below the input if there is not enough space above it.

@personalizedrefrigerator
Copy link
Author

personalizedrefrigerator commented Aug 11, 2022 •
edited

I'm not sure what you mean by making the color picker scroll.

I was thinking the following changes could do this:

  • Making the maximum height of the color picker 100vh
  • Preventing the top of the color picker from going off of the screen
  • Setting overflow-y to auto to enable auto-scrolling

An issue with the above suggestion is that max-height: 100vh will change the size of color pickers on pages that do have enough space for the color picker above/below it, if the user is viewing the page on a device with a small screen.

For example,

<body>
  <input type='text' class='coloris-input'/>
  <div style='height: 1000px;'></div>
</body>

Setting max-height to 100vh constrains the height of the color picker on small screens when it is not necessary.

@mdbassit
Copy link
Owner

I don't think scrolling is a good idea. It's not a great user experience, but also it's not as easy to implement as it may seem.
I think what you need is a custom theme with the gradient on the left and the other controls on the right. Here is an example of what it might look:

Alternative theme

You can then switch between that new theme and default theme whenever the orientation changes.

@personalizedrefrigerator
Copy link
Author

I don't think scrolling is a good idea. It's not a great user experience, but also it's not as easy to implement as it may seem. I think what you need is a custom theme with the gradient on the left and the other controls on the right. Here is an example of what it might look:

Alternative theme

You can then switch between that new theme and default theme whenever the orientation changes.

Good idea!

@personalizedrefrigerator personalizedrefrigerator changed the title Feature request: Scroll the color input when there isn't enough space on the screen Bug: Color picker sometimes goes off top of screen Aug 11, 2022
@mdbassit
Copy link
Owner

I will add that horizontal theme in a little while

@mdbassit
Copy link
Owner

I just pushed a new release with a new theme called "pill" that does what I described above.

@melloware
Copy link
Contributor

I just pushed 0.16.0 to NPM with this fix as well. Nice work @mdbassit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mdbassit mdbassit

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@melloware @mdbassit @personalizedrefrigerator