Qooxdoo - Mobile Map covers toolbar - qooxdoo

Question

Hi I was using the mobile map demo here: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps
and I was trying to add a toolbar at the bottom of the map page. It works, but then the map quickly covers it up. After looking at the DOM it looks like the toolbar gets added within the map div.
Is there a way to make it appear on top of the map rather than underneath? This code is all contained in the Application.js file.
var maps = test.page.Maps.getInstance();
var manager = new qx.ui.mobile.page.Manager(false);
manager.addDetail([
maps
]);
maps.show();
var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
maps.add(toolbar);
Thanks for the help!

Answer 1

With maps.add(toolbar) you're adding the toolbar to the map, that's why it is added to the map div. I guess you have to go through the page.Manager to add separate elements to the GUI. You might want to revise the mobile tutorial which achieves exactly that, also including a widget derived from NavigationPage like in the maps showcase.

Answer 2

have a look at:
https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
There are several important things in this example.
The methods "_createContent" and "_createScrollContainer()" are overridden.
A NavigationPage creates by default an iScroll container where you can put all widgets into.
But the OpenLayer div is not a qooxdoo widget, of course. It has its own scrolling logic.
That is why, you have to overwrite these methods. Much of the styling of OpenLayer can not be changed. The OpenLayer overlays all contents because its has an absolute positioning.
But there is a solution:
Use this method in initalize() method
this.addAfterNavigationBar(widget);
Assign a CSS class to your widget through
widget.addCssClass("your-class")
Change your "styles.css" in resource folder:
.your-class {
z-index: 5000;
position: absolute;
}
Greetz Christopher