Qooxdoo - Mobile Map covers toolbar

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!

score 0 · Answer 1 · answered Oct 13 '12 at 08:33

0

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.

answered Oct 13 '12 at 08:33

ThomasH

22,276
13
61
62

Hey @ThomasH, I tried adding it in the view above the map, but then it placed it at the top of the page. I'll probably have to tinker with it until it works, but I was hoping a z-index change or something similar would fix it, since it initially appears in the right place until the map covers it. ;-) Thanks for your response! – Jonathan Oct 18 '12 at 10:54

score 0 · Answer 2 · answered Oct 22 '12 at 08:41

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

I tried that solution exactly as written, and it didn't seem to work. Anything I may have missed? Thanks! — Jonathan, Oct 22 '12 at 20:50

Qooxdoo - Mobile Map covers toolbar

2 Answers2