AbsolutePanel Not Displaying Content - google-apps-script

Question

I'm trying to display a couple of buttons at the top of the window (this works fine) below which I want to create boxes of data in a ScrollPanel and an AbsolutePanel so that it can be placed anywhere and the user can scroll to it (ultimately there's going to be a lot of boxes being displayed on the screen at once).
For some reason the content in the AbsolutePanel is not displaying. I'm sure I've just missed something stupid but hopefully someone can let me know where I've gone wrong.
function doGet()
{
var app = UiApp.createApplication();
var ver = app.createVerticalPanel();
app.add(ver);
var hor = app.createHorizontalPanel();
ver.add(hor);
var add = app.createButton("Add");
hor.add(add);
var rem = app.createButton("Remove");
hor.add(rem);
var scr = app.createScrollPanel();
scr.setWidth("100%");
scr.setHeight("100%");
ver.add(scr);
var abs = app.createAbsolutePanel();
abs.setWidth("100%");
abs.setHeight("100%");
scr.add(abs);
var b1v = app.createVerticalPanel();
b1v.setBorderWidth(1);
abs.add(b1v, 50, 50);
var b1n = app.createLabel("Text 1");
b1v.add(b1n);
var b1b = app.createLabel("Text 2");
b1v.add(b1b);
var b1c = app.createLabel("Text 3");
b1v.add(b1c);
return app;
}
Alternatively, if anyone knows how to display a hierarchical chart in a GAS UI, that would be awesome, too. I tried using Google Charts and the HTML object in GAS, but it strips out any scripts.

Answer 1

Thanks, I also found if I set the height of the VerticalPanel to 100% and the height of the second row to 100% it works more how I was after...
function doGet()
{
var app = UiApp.createApplication();
var ver = app.createVerticalPanel();
ver.setSize("100%", "100%"); // Changed this
app.add(ver);
var hor = app.createHorizontalPanel();
ver.add(hor);
var add = app.createButton("Add");
hor.add(add);
var rem = app.createButton("Remove");
hor.add(rem);
var scr = app.createScrollPanel();
scr.setWidth("100%");
scr.setHeight("100%");
ver.add(scr);
ver.setCellHeight(scr, "100%"); // And changed this
var abs = app.createAbsolutePanel();
abs.setWidth("100%");
abs.setHeight("100%");
scr.add(abs);
var b1v = app.createVerticalPanel();
b1v.setBorderWidth(1);
abs.add(b1v, 50, 50);
var b1n = app.createLabel("Text 1");
b1v.add(b1n);
var b1b = app.createLabel("Text 2");
b1v.add(b1b);
var b1c = app.createLabel("Text 3");
b1v.add(b1c);
return app;
}

Answer 2

The size definition of your absolute panel is the issue, if you define it in pixels then everything works. In % is remains invisible. To debug that I assigned a color to the panel to see what happens.
try like that :
function doGet(){
var app = UiApp.createApplication();
var ver = app.createVerticalPanel();
app.add(ver);
var hor = app.createHorizontalPanel();
ver.add(hor);
var add = app.createButton("Add");
hor.add(add);
var rem = app.createButton("Remove");
hor.add(rem);
var scr = app.createScrollPanel();
ver.add(scr);
var abs = app.createAbsolutePanel().setStyleAttributes({'background-color':'#DDD'})
.setWidth("1000px")
.setHeight("2000px");
scr.add(abs);
var b1v = app.createVerticalPanel();
b1v.setBorderWidth(1);
abs.add(b1v,100,100);
var b1n = app.createLabel("Text 1");
b1v.add(b1n);
var b1b = app.createLabel("Text 2");
b1v.add(b1b);
var b1c = app.createLabel("Text 3");
b1v.add(b1c);
return app;
}