Google App Script width between widgets

Question

I'm using google app scripts to create a web app. You can see that there is a crazy amount of spacing between the password text and the password text box. How can I adjust that spacing?

the app

Here's my code: function doGet() { var app = UiApp.createApplication();

  var mygrid = app.createGrid(2, 2);
  mygrid.setWidget(0, 0, app.createLabel('Incomplete Challenges').setStyleAttributes(css.Title));
  mygrid.setWidget(1, 0, app.createLabel('Password:').setStyleAttributes(css.Inputs));
  mygrid.setWidget(1, 1, app.createPasswordTextBox().setName("text"));

  var mybutton = app.createButton('Submit');

  var submitHandler = app.createServerClickHandler('getResults');
  submitHandler.addCallbackElement(mygrid);
  mybutton.addClickHandler(submitHandler);

  var mypanel = app.createVerticalPanel();
  mypanel.add(mygrid);
  mypanel.add(mybutton);
  app.add(mypanel);

  return app;
}

Thanks in advance.

One more thing, I'm using some CSS in another .gs file...here it is below:

var css={};
css.Title = { fontFamily:'Fantasy', fontSize:'24px', width: '250', marginTop:'5'};
css.Labels = { fontFamily:'Verdana', fontSize:'12px', width: '100', marginTop: '5'};
css.Inputs = { fontFamily:'Verdana', fontSize:'12px', width: '70'};
css.TextArea = { fontFamily:'Verdana', fontSize:'12px', width: '200', height: '50'};
css.PutBorder = {borderStyle: 'solid'};

Serge insas Serge insas · Accepted Answer · 2014-09-01T05:46:16

The grid is a widget that keeps the same width across a column in every row. The widest label in a column determines the width of this column so the result you get is logical.

You could simply put the first label outside of the grid like below :

function doGet(){
  var app = UiApp.createApplication();
  var mypanel = app.createVerticalPanel().setStyleAttributes(css.mypanel);
  var mygrid = app.createGrid(2, 2);
  mypanel.add(app.createLabel('Incomplete Challenges').setStyleAttributes(css.Title));
  mygrid.setWidget(0, 0, app.createLabel('Password:').setStyleAttributes(css.Inputs));
  mygrid.setWidget(0, 1, app.createPasswordTextBox().setName("text"));

  var mybutton = app.createButton('Submit');

  var submitHandler = app.createServerClickHandler('getResults');
  submitHandler.addCallbackElement(mygrid);
  mybutton.addClickHandler(submitHandler);

  mypanel.add(mygrid);
  mypanel.add(mybutton);
  app.add(mypanel);

  return app;
}

var css={};
css.mypanel = { padding : '25px'};
css.Title = { fontFamily:'Fantasy', fontSize:'24px', width: '250', marginTop:'5'};
css.Labels = { fontFamily:'Verdana', fontSize:'12px', width: '100', marginTop: '5'};
css.Inputs = { fontFamily:'Verdana', fontSize:'12px', width: '70'};
css.TextArea = { fontFamily:'Verdana', fontSize:'12px', width: '200', height: '50'};
css.PutBorder = {borderStyle: 'solid'};

result :

enter image description here

Google App Script width between widgets

1 Answers