3

There is a dropdown and date-picker inside a modal and the size of the modal is small, so when we click on the date-picker the widget is overflowing the modal. Is this a good practise?

or should we design a big modal size by default so that when the date picker widget is evoked it lies inside the modal

Reference:

  1. enter image description here
  2. enter image description here

Which of the above approach is the correct one?

Improve this question
2
  • It's a bad experience. Increase the size of the dialogue box. Side down animation
    – Barnali Nandan
    Oct 22, 2021 at 12:10
  • 10
    The second one just looks like an accident instead of an intentional design. It wouldn't be wise to plan to do it on purpose because its far less usable and ugly.
    – Mark Rogers
    Oct 22, 2021 at 17:53

1 Answer 1

Reset to default
9

I have never seen version 2. anywhere and to be honest, it makes no sense as first it's hard to cover all the cases it creates with that way of interaction. If the data input field is the last element on the modal will the modal create a scroll area just to adapt a picker inside it? That would result in an extra, unexpected action from the user to scroll just to see the whole month.

What happens after you select the date in that scenario? Will the modal box resize again to hide the scroll?

I don't think we can find any test data on your questions regarding these scenarios but given existing design patterns and the extra cases and issues the interaction presented in case 2 might cause I think it's safe to say that case 1 is the go-to.

Improve this answer
1
  • 3
    I've only seen version 2 as a bug, never as intended behavior
    – GammaGames
    Oct 22, 2021 at 17:31

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.