Here is the scenario: There is a modal popup in which each step has a certain form fields. on the last step, I need to repeat a section (last 3 fields) on a form repeatedly.

Here is what I thought: have a add and delete button at the end of a section, to clone the section and append it to the previous one and since it is a modal, have a scrollbar for the entire section.

Is there a better way to do this? Plz share how would you do this?

Current issues: Adding the scroll is making the modal messy.

Thanksscreenshot of the design

  • 1
    If possible try to add heading for each section to distinguish each other. – Shankar Murugesan Dec 6 '17 at 15:08

As you don't want to display more fields vertically in order to avoid overflow, my suggestion would be to use Tabs:

enter image description here

Either on the bottom as the group of fields is the last one, or on the right side.

|improve this answer|||||
  • Thanks for the suggestion. Its a good idea, Incase the Manufacturer section reaches up to 12-15, how to make this work is what I am thinking. Any thoughts? – Pavithra Olety Nov 3 '16 at 15:01
  • 12-15 sounds like too many tabs for a modal view without any overflow. You could also use some kind of horizontal slides, similarly to the tabs, and simply use numbers as buttons: #1 #2 #3 + Just make sure the user understands the "buttons" belong to the box, and not to the whole modal. – Alvaro Nov 3 '16 at 15:15
  • Hiding the sections under tab is not a right solution. It can be wide open like your screenshot. – Shankar Murugesan Dec 6 '17 at 15:07

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.