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?

  • 2
    By the description you're giving, I wonder if modal is the right choice – Devin Dec 13 '19 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 at 4:24

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. – TheManWithNoName Dec 16 '19 at 11:00
  • If you ignore the css syntax, the messages are still the same :) – dougajmcdonald Dec 18 '19 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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