Aplicación de Internet autónoma y barras de desplazamiento del navegador

Question

EDITAR (última! :-): Una solución alternativa a esto es poner toda la interfaz de usuario en un panel absoluto (thx megabyte1024). No es perfecto, ya que no puedo tener un color de fondo en toda el área de visualización, pero al menos es mucho más cómodo. (Enlace a la aplicación de prueba en línea se actualiza con esta nueva versión) y la captura de pantalla de la versión final ... mucho mejor :-)

---

tengo una aplicación web independiente escrito en gas que ha un scrollPanel, toda la UI es bastante pequeña y ocupa solo una parte de un área de visualización (incluso pequeña) en la ventana del navegador.

Lo que me molesta es que siempre tengo una barra de desplazamiento horizontal y vertical en la ventana del navegador e interfiere con el contenido de la IU cuando uso un mouse o un panel táctil para desplazar mi panel de desplazamiento en la ventana de la IU ... Entonces, mi pregunta es: ¿hay alguna manera de evitar esto, decirle al navegador que no hay necesidad de agregar barras de desplazamiento o definir un área de "webapp" más pequeña?

tenga en cuenta que el tamaño de estas barras de desplazamiento es totalmente independiente del tamaño del panel de la interfaz de usuario, siempre que este último sea más pequeño que la ventana del navegador.

Aquí hay una captura de pantalla para ilustrar lo que estoy diciendo (entiendo que es un detalle pero hace que el uso de esta aplicación a veces sea incómodo ;-) Aquí también hay un enlace a un public version of the app.

Otro detalle que me gustaría resolver es el color de la fuente en la parte superior de esta interfaz de usuario: estos son los cuadros de texto que se pone a 'sólo lectura' porque no quiero que sean editables (lo haría dar la ilusión de que el usuario puede modificar los datos que no es el caso) y un efecto secundario de este estado de solo lectura es que las fuentes están "grises" ... ¿hay alguna manera de evitar eso manteniendo el mismo aspecto (excepto el color) en esta 'mesa falsa'?

EDIT: encontró la segunda pregunta sobre el color del texto: .setStyleAttribute('color','#000000') tan simple como eso ... demasiado estúpido de mi parte no haber encontrado antes ;-)

NOTA 2: curiosamente, la interfaz de usuario diseñado con el constructor de interfaz gráfica de usuario no sufren el mismo problema ...

Edit2: aquí está el código de la parte doGet (modificado para funcionar sin funcionalidad, pero a 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

Una posible solución para deshacerse de la barra de desplazamiento es utilizar un panel intermedio Absolute. El siguiente código tiene las barras de desplazamiento.

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

Y el fuelle código no tiene las barras de desplazamiento

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

al incrustar una aplicación web HtmlService dentro de un sitio de Google, parece que el gadget marco flotante tiene que ser de unos 50 píxeles más grande que la aplicación altura para que desaparezca la barra de desplazamiento vertical. Asumir lo mismo se aplica a UiApp.