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