Is it possible to provide a decent user experience with layouts in dialog?

I have a simple, common sense layout problem that looks hard if not impossible to solve in Vaadin:

  • Dialog window with content in the middle and a button strip at the bottom. (I don’t think this needs justification.)
  • If the content exceeds the available dialog height, it gets a scrollbar. The buttons do NOT get scrolled. They always stay in view. (The user should be able to exit out of the dialog by OKing or Canceling regardless of where in the content she is.)
  • By default, the dialog resizes to the height of the content (and I won’t say “or the maximum available height”, so as not to add another unsolvable problem). (The dialog is reusable and it is unreasonable to force clients to give it a height. Besides, giving explicit heights is not realistic, because different heights are needed for different themes.)
  • Use of explicit heights in content or button strip is forbidden, in order to allow themes to work well, various contents to work well. (The same justification as above applies here.)

Fair enough?

On to the partial solution:

  1. A wrapper is needed as a single dialog content, to be assigned using myDialog.setContent(). This is a VerticalLayout.
  2. The content and the button strip are children of this wrapper, with an expand ratio of 1 and 0, respectively. This makes it so the content expands and the buttons do not. The content can be a VerticalLayout, a Form, what have you. The buttons are a HorizontalLayout.
  3. Both content and button strip have height undefined. This way, they adapt to the theme and to the content size.

Now for the complicated bits:
4. In order to allow the vertical scrollbar to scroll only the content (when it doesn’t fit), and not the buttons, the wrapper must be set to height = 100%, and the content must have overflow-y: scroll. But in this case, the dialog itself must have a defined height.
5. In order for the dialog to take on the height of the content, the content wrapper must be height = undefined.

As you see above, points (4) and (5) contradict each other with respect to the height of the content wrapper.

How do I solve this problem while respecting my requirements? I do NOT want to use explicit heights, as that would defeat the purpose of a generic dialog. I do NOT need an in depth explanation of why things work the way they work if I set this or that setting - I get it. I just need a solution.

A thought: perhaps solve (5) by using use absolute positioning for the button strip (via AbsoluteLayout), and reserve a bottom margin in the content equal to the height of the button strip. Bleh, even this won’t work well, because I can’t guess the right height of the button strip. Perhaps I can compute it though?

And if the answer to the above is a breeze, then perhaps you can help me out with the bonus question: how do I tell my dialog not to exceed 100%, even if I need it to grow with the content.

The problem here might be that when both the parent and the child have an undefined height, we immediately defer the resulting heights to “whatever”, instead of checking if the child’s content can provide a defined height.

I’ve been attempting to do something similar; see
this thread
.

I’ve not got very far though.

Just thought you’d like to know you’re not alone with this - but I don’t believe that there is a generic solution at the moment.

Cheers,

Charles.