小部件之间的 Google App Script 宽度答案

【问题标题】：Google App Script width between widgets小部件之间的 Google App Script 宽度
【发布时间】：2014-09-01 05:06:22
【问题描述】：

我正在使用谷歌应用脚本来创建一个网络应用。您可以看到密码文本和密码文本框之间有大量的间距。如何调整间距？

这是我的代码：函数 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;
}

提前致谢。

还有一件事，我在另一个 .gs 文件中使用了一些 CSS……它在下面：

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'};

【问题讨论】：

标签： google-apps-script spacing

【解决方案1】：

网格是一个小部件，它在每一行的列中保持相同的宽度。列中最宽的标签决定了该列的宽度，因此您得到的结果是合乎逻辑的。

您可以简单地将第一个标签放在网格之外，如下所示：

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'};

结果：

【讨论】：