I want to design a modal-dialog, which contains a stepper. Also in some cases, the input fields are not too many and in other cases, they are A LOT of them.

Which means if I predefine the size of the modal, in some sections of the stepper it must expand on the width or I will keep huge empty space in order to predict the edge case.

What can I do?

  • 3
    By the description you're giving, I wonder if modal is the right choice
    – Devin
    Dec 13, 2019 at 18:42
  • Can you provide an example of either case? Based on your description it is difficult to provide the best solution to your specific case.
    – Adriano
    Jan 13, 2020 at 4:24

3 Answers 3


Consider taking this out of a modal and placing it on the page if there are alot of input fields

If you still want to keep it in a modal, then I have a couple of options for you:

  1. Option 1: Have a fluid modal that changes size depending on the number of input fields you have per step (Not my number one option as the changing modal size can be a bit jarring to users but they will get used to it).

  2. Option 2: Keep the modal to a set size and display all the input fields with a scrollbar.

  3. Option 3: Keep the modal to a set size and only display only the input fields that are commonly used by default and place the others in an "Advanced" or "Advanced Settings" link. When the user selects that link, then display all the input fields with a scrollbar.


You can size the modal dynamically based on content.

In the simplest of cases, perhaps set a min-height, then set the height as auto so that is expands to the height of the content.

Another alternative would be to set a min-height and a max-height and set overflow-y: scroll so that with excessive content the whole modal remains above the fold.

If you set the min/max height using the vh you can ensure the height scales to the viewport.

As a sidepoint, you should probably asses whether all input fields are mandatory, and frankly, if they aren't remove them. If they aren't mandatory why are you asking for the info?

  • Thank you for the answer, but I don't mean the question CSS wise. Dec 16, 2019 at 11:00
  • If you ignore the css syntax, the messages are still the same :) Dec 18, 2019 at 17:33

Use a bottom sheet instead? it can be scaled up based on data sets.

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.