Question

EDIT (last ! 🙂 : A workaround to this is putting the whole UI in an absolutePanel (thx megabyte1024).
It’s not perfect since I cannot have a background color in the whole display area but it’s at least much more confortable. (link to online test app is updated with this new version) and screen capture of the final version… much better 🙂

---

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

What bothers me is that I always have both an horizontal and a vertical scrollbar in the browser window and it interferes with the UI content when I use a mouse or a trackpad to scroll my scrollpanel in the UI window…
So, my question is : is there a way to avoid this, to tell the browser that there is no need to add scrollbars or to define a smaller “webapp area” ?

note that the size of these scroll bars are fully independent from the UI panel size as long as this last one is smaller than the browser window.

Here is a screen capture to illustrate what I’m saying (I do understand that it’s a detail but it makes the use of this app sometimes just uncomfortable 😉 Here is also a link to a public version of the app.

Another detail I’d like to solve is the font color in the upper part of this UI : these are textBoxes that I set to ‘read only’ because I don’t want them to be editable (it would give the illusion that the user could modify data which is not the case) and a side effect of this read only status is that fonts are “greyed” … is there some way to avoid that while keeping the same aspect (except color) on this ‘false table’ ?

EDIT : found the second question about text color : .setStyleAttribute('color','#000000') as simple as that… too stupid from me not to have found it earlier 😉

NOTE 2 : interestingly, UI designed with the GUI builder do not suffer the same problem …

EDIT2 :here is the code of the doGet part (modified to run without functionality but to 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

A possible solution to get rid of the scroll bar is to use an intermediate Absolute panel. The following code has the scroll bars.

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

And the code bellow has no the scroll bars

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