Question

function doGet() {
  var app = UiApp.createApplication();
  var flex = app.createFlexTable();
  for (var i = 1; i<=30; i++) 
    flex.setWidget(i, 0, app.createButton('Button '+i).setId('Button'+i).setVisible(false));
  app.getElementById('Button1').setVisible(true);

  var submit = app.createButton('Submit');
  app.add(flex).add(submit); 
  return app;
}

Produces this Ui.

How can we eliminate the empty space between the first visible button and the ‘Submit’ button?

Answer 1

The space is coming from the browser specific styling of the various HTML elements, which applies, for example, a 2px border-spacing to each hidden row. (I’m testing in Chrome; it may be different for other browsers.)

I’d suggest using a CSS reset to clear out all browser-specific styling. A simple one like this fixes your spacing issue (again, in Chrome):

div, table, tbody, tr, td {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}