獨立的webapp和瀏覽器滾動條

Question

編輯（last！:-)：解決方法是將整個UI放入一個absolutePanel（thx megabyte1024）。 這並不完美，因爲我無法在整個顯示區域中使用背景色，但它至少更舒適。 （鏈接到在線測試應用程序與此新版本更新），並最終版本的屏幕捕獲...好多了:-)

---

我已經寫在GAS一個獨立的web應用程序有一個scrollPanel，整個UI非常小，只佔用瀏覽器窗口中一個（甚至很小）顯示區域的一部分。

令我困擾的是，我總是在瀏覽器窗口中同時具有水平和垂直滾動條，並且當​​我使用鼠標或觸控板在UI窗口中滾動我的滾動面時，它會干擾UI內容... 所以，我的問題是：有沒有辦法避免這種情況，告訴瀏覽器不需要添加滾動條或定義一個較小的「webapp區域」？

請注意，只要最後一個滾動條小於瀏覽器窗口，這些滾動條的大小就完全獨立於UI面板大小。

下面是一個屏幕截圖，以說明我在說什麼（我明白這是一個細節，但它使得使用這個應用程序有時只是不舒服;-)這裏也是一個鏈接到public version of the app。

另一個細節，我想解決的是在這個界面的上部字體顏色：這些文本框，我設置爲「只讀」，因爲我不想讓他們爲可編輯（它會給出錯覺，用戶可以修改數據，而不是這種情況），這種只讀狀態的副作用是，字體是「灰色的」...有一些方法可以避免，同時保持相同的方面（顏色除外）在這個'假桌子'上？

編輯：發現有關文本顏色第二個問題：.setStyleAttribute('color','#000000')那樣簡單......太從我笨不是已經發現早;-)

注2：：有趣的是，UI設計了GUI builder不會遭受同樣的問題...

EDIT2：這裏是部分的doGet的代碼（修改爲不運行的功能，但到showup）：

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

嵌入谷歌網站內HTMLService Web應用程序時，它看起來像的iFrame小工具必須比應用程序的約50像素垂直滾動條消失的高度。假設同樣的事情適用於UiApp。