独立的webapp和浏览器滚动条

Question

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

---

我有一个用GAS编写的独立webapp，它有一个scrollPanel，整个UI很小，只占用浏览器窗口中一个（甚至很小的）显示区域的一部分。

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

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

这是一个屏幕截图，用于说明我在说什么（我明白这是一个细节，但它使这个应用程序的使用有时只是不舒服;-)这里也是public version of the app的链接。

我想要解决的另一个细节是这个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
 } 

Answer 1

摆脱滚动条的一种可能解决方案是使用中间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;
}

Answer 2

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