How to resize a DialogBox in GWT so that a FlexTable fits in?

Question

I want to use a FlexTable in a DialogBox. The size of the DialogBox should match the size of the FlexTable. Unfortunately, the DialogBox is smaller, so the FlexTable is cut and only parts of it are visible. Is there a way to automatically resize the DialogBox so that the FlexTable fits? (Please note, that the FlexTable will not change while being displayed, so there is not automatic resizing necessary once it is shown on the screen...)

Did anyone already accomplish this?

Answer 1

I think I now found out what was wrong. In addition to Bryan's great answer which might also help in such situations (though in mine there is no change between automatic sizing and Bryan's approach). I found out that when using animations, the width of a DialogBox in GWT is limited to 400 px. When changing the line

setAnimationEnabled(true);

to

setAnimationEnabled(false);

the sizing of the DialogBox works perfectly fine. Maybe this is helpful for someone...

Answer 2

In my application, I created a DialogBox subclass which makes things much easier to deal with because you will have to know when the modal is present on screen so that you can accurately determine the table's size.

public class Modal extends DialogBox
{
  private VerticalPanel myContentPanel;
  private FlexTable myTable;

  public Modal( )
  {
    ...

    // Construct the modal and call `setWidget()` with something like a `VerticalPanel`
    super.setWidget( this.myContentPanel );
  }

  @Override
  public void onAttach( )
  {
    // This is called when the modal attaches to the DOM:
    super.onAttach( );

    // Heights still aren't quite valid, we need to defer the call one more frame.

    // Make ourselves invisible while we defer the call so we don't flicker:
    super.setVisible( false );

    // Defer until the next frame:
    Scheduler.get( ).scheduleDeferred( new ScheduledCommand( )
    {
      @Override
      public void execute( )
      {
        // Height on the table is now valid:
        int width  = myTable.getOffsetWidth( );
        int height = myTable.getOffsetHeight( );

        // Update the heights:
        Modal.this.myContentPanel.setSize( width + "px", height + "px" );
        Modal.this.setSize( width + "px", height + "px" );

        // Center and show ourselves:
        Modal.this.center( );
        Modal.this.setVisible( true );
      }
    });
  }
}

In my experience, I've found that you will need to defer the getOffsetHeight and getOffsetWidth calls once after the widget has been attached to the DOM to get a consistent, valid result.