In the image below, the sidebar (Blue) is a scrollable container that has input-fields, check boxes and a color-picker (yellow). When the user clicks the color-picker button, a pop-up dialog shows up (green).

Should this pop-up get automatically closed when the user scrolls the area behind it (blue), or when the application's page gets resized?

If yes, does this behavior meet users' expectations? Won't this cause the user to loose focus on the controller (color picker)?


3 Answers 3


You could sidestep the issue and embed the color picker inside the scrollable container? When the user clicks on the "Popup button" it expands the color picker inside the container. It can collapse if the user clicks on the button again or once a color is selected. enter image description here

Once you have a modal popup then a user would expect it to stay there until they explicitly close it or click away from it. If you embed the picker inside the container, it won't be viewed as a modal and users won't feel like they would need to dismiss it.

  • Great idea, but it's unfortunately not possible to embed it that way. Besides of explicit closing like clicking out of it. How would you treat scrolling behind it?
    – Simon
    Apr 12, 2019 at 11:49

Do not automatically close the color-picker pop-up!

That goes against users expectations. Users clicked to open it, and they expect to click to close it.

Your question regarding Scrolling behind it:

  • I understand your concern about the color-picker pop-up blocking content especially when users scroll up or down. However, when user scroll, they only expect the page to scroll, they do not expect the scroll to close a pop-up and scroll a page. Users expect that this pop-up will stay open till they either click Close button/icon or -in some cases- click outside of it.

  • Pop-up Design could also encourage closing the pop-up. The design somehow gently forces users to close a pop-up they opened.** Take MS Paint color-picker as an example. Users pick a color then must click the OK button to confirm it, which then closes the pop-up.

enter image description here

If possible, Jaco's idea: "embed the color picker inside the scrollable container" is a great idea to avoid the issue.


I'd like to answer it in a different way, far from the point of view of community edition, BUT from the point of view of my experience as an user while using it for the first time. The scenarios explained below would be my journey to use your pseudo UI

  • "I'd like to see the what's the color value for let's say an item"
  • "Here is the color wheel icon with yellow color, I'd like to click on that"
  • I clicked on the wheel and a popup shows the color of the item
  • Feeling "Hmm.."
  • "Okay, then what's the font size of the item?"
  • I'm scrolling the whole section but couldn't find the font size panel
  • "Where's that panel!!"
  • The popup is showing the color, "I already know it, where's the size panel??"
  • I'm scrolling again, but the size panel was supposed to be there!
  • "What's this new software trying to explain!"
  • "Why the hell this popup still remains open!!??"
  • "Be closed the popup! I'm closing you with your 'X' icon"
  • Oh crap! the size panel is here! Just behind the open popup! Seriously!
  • "This software is not predictable I guess"

Lesson from the journey:-

OPEN something WHEN it's needed

CLOSE something WHEN it's NOT needed.

Your software MIGHT have something important which should be kept open, since you know that, you decide - IF there is something that requires the popup opened all the time?

Thanks :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.