Geek asks and answers

Standalone webapp and browser scrollbars

EDIT (last! :-): The workaround for this is to have the entire user interface in an absolute Panel (thanks megabyte1024). This is not ideal since I cannot have a background color in the entire display area, but it is at least much more convenient. (the link to the online testing application is updated with this new version) and the screen capture of the final version ... is much better :-)

enter image description here

I have a standalone webapp written in GAS that has a scrollPanel, the entire user interface is quite small and occupies only part of the (even small) display area in the browser window.

What bothers me is that I always have horizontal and vertical scroll bars in the browser window, and this interferes with the user interface content when I use the mouse or trackpad to scroll my scroll bar in the user interface window ... So, my question: is there a way to avoid this, tell the browser that there is no need to add scrollbars or define a smaller "web address" area?

note that the size of these scroll bars is completely independent of the size of the user interface panel if this one is smaller than the browser window.

, , ( , , ;-) . enter image description here

, , - : , , , ( , ), , ""... - , ( ) false table '?

: : .setStyleAttribute('color','#000000') , ... , ; -)

2: , , GUI-, ...

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
 }
+5
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;
}
+2

- HTMLService Google Site, , iFrame 50 , , . , UiApp.

0

More articles:


All Articles