5

编辑（最后一个！:-)：解决方法是将整个 UI 放在 absolutePanel 中（谢谢兆字节1024）。这并不完美，因为我不能在整个显示区域中使用背景颜色，但它至少更舒适。（此新版本更新了在线测试应用程序的链接）和最终版本的屏幕截图......好多了:-)

在此处输入图像描述

我有一个用 GAS 编写的独立 web 应用程序，它有一个滚动面板，整个 UI 相当小，只占用浏览器窗口中显示区域的一部分（甚至很小）。

困扰我的是，我在浏览器窗口中总是同时有水平和垂直滚动条，当我使用鼠标或触控板在 UI 窗口中滚动滚动面板时，它会干扰 UI 内容......所以，我的问题是：有没有办法避免这种情况，告诉浏览器不需要添加滚动条或定义更小的“webapp 区域”？

请注意，只要最后一个小于浏览器窗口，这些滚动条的大小就完全独立于 UI 面板大小。

这是一个屏幕截图来说明我在说什么（我明白这是一个细节，但它使这个应用程序的使用有时只是不舒服;-) 这里也是一个应用程序的公共版本的链接。 在此处输入图像描述

我想解决的另一个细节是这个 UI 上部的字体颜色：这些是我设置为“只读”的文本框，因为我不希望它们是可编辑的（它会给用户一种错觉可以修改不是这种情况的数据）并且这种只读状态的副作用是字体是“灰色的”......有没有办法避免这种情况，同时在这个“假表”上保持相同的方面（除了颜色） ?

编辑：找到关于文本颜色的第二个问题：.setStyleAttribute('color','#000000')就这么简单......我太愚蠢了，没有早点找到它;-)

注意 2 ：有趣的是，使用 GUI 构建器设计的 UI 不会遇到同样的问题......

EDIT2：这里是 doGet 部分的代码（修改为在没有功能的情况下运行但显示）：

var key='0AnqSFd3iikE3dFV3ZlF5enZIV0JQQ0c1a3dWX1dQbGc'
var ss = SpreadsheetApp.openById(key)
var sh = ss.getSheetByName('Sheet1')
var idx = 0
var data = ss.getDataRange().getValues();
var len = data.length;
var scrit = ['All fields','Name','Lastname','Postal Adress','ZIP code','City','Country','email','phone#']
 //public version


function doGet() {
   var app = UiApp.createApplication().setTitle("BrowseList Test")
       .setHeight(420).setWidth(800).setStyleAttribute("background-color","beige").setStyleAttribute('padding','20');
    var title = app.createHTML('<B>DATABASE User Interface</B>').setStyleAttribute('color','#888888');
    app.add(title);
    var scroll = app.createScrollPanel().setPixelSize(750,150)
    var vpanel = app.createVerticalPanel();
    var cell = new Array();
    var cellWidth = [45,135,150,250,50,100]
    var row = new Array();
    var cHandler = app.createServerHandler('showpicked').addCallbackElement(scroll);
    for(vv=0;vv<15;++vv){
      row[vv]=app.createHorizontalPanel();
      vpanel.add(row[vv]);
       for(hh=0;hh<cellWidth.length;++hh){
        cell[hh+(vv)*cellWidth.length]=app.createTextBox().setWidth(cellWidth[hh]+"").setTitle('Click to show below')
        .setReadOnly(true).setId((hh+vv*cellWidth.length)+'').addClickHandler(cHandler).setStyleAttribute('background','#eeeeff').setStyleAttribute('color','#000000');
        row[vv].add(cell[hh+(vv)*cellWidth.length])
        }
      }
app.add(scroll.add(vpanel))
// Initial populate
      var resindex = new Array()     
    for(vv=0;vv<15;++vv){
        resindex.push(vv+1)
       for(hh=0;hh<cellWidth.length;++hh){
         var rowpos=vv+1+idx
         var cellpos = hh+vv*cellWidth.length
        cell[cellpos].setValue(data[rowpos][hh]);
        }
      }
  var rHandler = app.createServerHandler('refresh');
//
  var slist = app.createListBox().setName('critere').setId('slist').addClickHandler(rHandler);
    for(nn=0;nn<scrit.length;++nn){
      slist.addItem(scrit[nn]);
      }
  var search = app.createTextBox().setName('search').setId('search').setTitle('becomes yellow if no match is found');
  var modeS = app.createRadioButton('chkmode','strict').setId('chkmodes').addClickHandler(rHandler);
  var modeG = app.createRadioButton('chkmode','global').setValue(true).setId('chkmodeg').addClickHandler(rHandler);
  var letter = app.createRadioButton('show','letter').setValue(true).setId('letter').addClickHandler(rHandler);
  var raw = app.createRadioButton('show','raw data').setId('raw').addClickHandler(rHandler);
  var index = app.createHTML('found/'+len).setId('index').setStyleAttribute('color','#aaaaaa');
  var grid = app.createGrid(2,10).setWidth('750');
  grid.setWidget(1, 0, app.createLabel('search'));
  grid.setWidget(1, 1, search);
  grid.setWidget(1, 2, modeS);
  grid.setWidget(1, 3, modeG);
  grid.setWidget(1, 5, slist);
  grid.setWidget(1, 6, app.createLabel('show mode'));
  grid.setWidget(1, 7, letter);
  grid.setWidget(1, 8, raw);
  grid.setWidget(1, 9, index);
  app.add(grid);

  var hidden = app.createHidden('hidden').setId('hidden').setValue(resindex.toString());
  cHandler.addCallbackElement(grid).addCallbackElement(scroll).addCallbackElement(hidden);
  var result = app.createRichTextArea().setPixelSize(745,160).setId('result')
  .setStyleAttribute('background','white').setStyleAttribute('font-family',"Arial, sans-serif")
  .setStyleAttribute('font-size','small');
  result.setHTML('test ui');
  app.add(result).add(hidden);
  var sHandler = app.createServerHandler('searchH').addCallbackElement(grid).addCallbackElement(scroll);
  search.addKeyUpHandler(sHandler);
  rHandler.addCallbackElement(grid).addCallbackElement(scroll);
  slist.addChangeHandler(rHandler);

return app
 }
4

2 回答 2

2

摆脱滚动条的一种可能解决方案是使用中间Absolute面板。以下代码具有滚动条。

function doGet() {
  var app = UiApp.createApplication();
  var panel = app.createScrollPanel().setSize('100%', '100%');
  var content = app.createButton('Scroll Bars').setSize('100%', '100%');
  panel.setWidget(content);
  app.add(panel);
  return app;
}

而且下面的代码没有滚动条

function doGet() {
  var app = UiApp.createApplication();
  var panel = app.createScrollPanel().setSize('100%', '100%');
  var subPanel = app.createAbsolutePanel().setSize('100%', '100%');
  var content = app.createButton('No Scroll Bars').setSize('100%', '100%');
  subPanel.add(content);
  panel.setWidget(subPanel);
  app.add(panel);
  return app;
}
于 2012-07-26T07:56:52.263 回答
0

当在 Google 站点中嵌入 HTMLService 网络应用程序时，看起来 iFrame 小工具必须比应用程序高度大 50 像素，垂直滚动条才会消失。假设同样的事情适用于 UiApp。

于 2014-04-04T05:43:47.077 回答