1

I have a modal, which has horizontal tabs at the top of it. Below the tabs is the tab content. Each content has different height. Without properly handling it - the modal size will have to change, which means that the tab's vertical positioning will also be changed.

Which of the following would you do:

  1. Let the modal change it's size without any further handling, which means the tabs' vertical position will be changed. (Worse in my opinion)
  2. Let the modal change it's size, but force the tabs to keep their vertical position, and only expand to the bottom. This option means that the modal will not be centered properly at the whole screen.
  3. Give the modal a fixed height (maybe the average height of all tabs), and put a scrollbar on contents that exceed this fixed height. This way will reduce any "jumps" in the modal. In addition, make an attempt to reduce the height of contents that exceed, using expanders and etc. (Best in my opinion)

Any opinions/ideas? Thanks!

3
  • For option 3, wouldn't you just fix the modal height to the height of the tallest tab? That is how tabbed components are usually presented.
    – calum_b
    Commented Jan 6, 2022 at 11:09
  • Thanks for your comment. That's a nice idea. Would you still do that if the tallest tab is exceptionally taller than the others, for example? Commented Jan 6, 2022 at 11:21
  • It's not ideal when that happens, but it's still pretty much standard behaviour for desktop UIs at least...partly because they often have OK+Cancel or other action buttons at the bottom of the modal, and you don't want those jumping around either. On mobile, tabbed components are usually meant to occupy the full screen, which is basically the same thing. If it's a web app, then it's up to you, but it sounds like you already know what sorts of things to avoid.
    – calum_b
    Commented Jan 6, 2022 at 23:04

4 Answers 4

2

Assuming the width of the modal is the same for both tab states then option 2 makes the most sense. Don't compromise usability just for aesthetic purposes.

You don't want the controls the user is interacting with to move from under the cursor once they've actioned it, so that immediately discounts option 1.

I don't see any user benefit to having a modal being a fixed size but with internal scrolling. That just adds extra effort on their part to be able to view everything the modal contains.

Option 2 means that they can toggle between the two (or more) tabs and then when they've made their choice they can see everything the view contains.

So what if the modal is longer on one view than another? As long as it's centred horizontally then it doesn't need to be centred vertically. There's no usability benefit to that, it's purely aesthetics.

0

You could add three icons in the top left illustrating your three options enabling the user to decide. Using this method, you could programmatically track this action. In turn, users would provide the answer allowing you to eventually remove the aforementioned three icons.

Aesthetically, I may go with option 2 because the tabs would remain in the same location.

2
  • Your suggestion feels a bit like you are offloading the decision to your users.
    – Nash
    Commented Jan 7, 2022 at 21:16
  • lol. Interesting perspective. My goal was to give the user control over the UI, providing a personalized experience. Similar to a saved workspace.
    – Eric Scott
    Commented Jan 7, 2022 at 21:38
0

Bets would be not to use modal at all and have this content in separate page with some sort of back option or navigation. If you use modal then 4) for sure is the best option (or the least wrong).

0

I would fix the height to the largest content area (or full screen if that is larger than that), keep the tabs on top. You should definitely try to skip any possible jumps of that modal.

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.