Question

How can I get the flex table (flex3) to align at the top in this Ui?

function doGet(e) {
  var app = UiApp.createApplication();
  var flex1 = app.createFlexTable().setBorderWidth(1);
  var flex2 = app.createFlexTable().setBorderWidth(1).setWidget(0, 0, app.createLabel('flex2'))
      .setWidget(1, 0, app.createTextArea().setHeight(400).setText('Text area in flex2'));
  var flex3 = app.createFlexTable().setBorderWidth(1).setWidget(0, 0, app.createLabel('flex3'));

  flex1.setWidget(0, 0, flex2).setWidget(0, 1, flex3);  
  app.add(flex1);
  return app;
}

Was expecting…

var flex1 = app.createFlexTable().setBorderWidth(1).setStyleAttribute('vertical-align', 'top');

or

var flex1 = app.createFlexTable().setBorderWidth(1).setColumnStyleAttribute(1, 'vertical-align', 'top');

to work.

Also, using a flow panel instead of a flex for the root didn’t work as expected either. That stacked the 2 flex vertically and not left to right.

Answer 1

Adding this line towards the bottom did the trick for me –

flex1.setStyleAttribute(0, 1, 'vertical-align', 'top');

Not sure why the global set style or set column style didn’t work. However, setting it on a specific row/column seem to work. Let me know.

This might have to end up on the Issue Tracker, please check there and log an issue.