Get usual spacing for menu and toolbar in Qooxdoo

Question

Doing a simple setup with a Qooxdoo menu bar and tool bar I get an unexpected layout.

Running this snippet in the Qooxdoo playground:

const layout = new qx.ui.layout.VBox(5);
const container = new qx.ui.container.Composite(layout);

const menubar = new qx.ui.menubar.MenuBar();
const menu = new qx.ui.menu.Menu();
menubar.add(new qx.ui.menubar.Button('File'), null, menu);
const toolbar = new qx.ui.toolbar.ToolBar();
toolbar.add(new qx.ui.toolbar.Button('test'));

container.add(menubar,{flex:0});
container.add(toolbar,{flex:0});
const windowManager = new qx.ui.window.Manager();
const desktop = new qx.ui.window.Desktop(windowManager);
desktop.setBackgroundColor('#a0f0f0');
container.add(desktop,{flex:1});
      
this.getRoot().add(container, {edge: 0});

I get this result:

How can I get rid of the white separators and also remove most of the grey padding in the toolbar?
The final result should look like a usual desktop application.

Answer 1

In your VBox layout you set 5px what means spacing between children. Pass 0 to get rid of it. Also setPadding(0,0,0,0) for both toolbar and menubar to reduce "grey" padding. For buttons of toolbar setMargin(0,0,0,0) to get rid of margin of buttons.