GWT component spacing on HorizontalPanel

Question

I have the following code to layout the menu for my page: ``` //Header Conainer Panel VerticalPanel headerWidget = new VerticalPanel(); headerWidget.setWidth("100%"); //Header Panel HorizontalPanel headerPanel = new HorizontalPanel(); headerPanel.setStyleName("header"); headerPanel.setWidth("100%"); Label title = new Label("Information System"); title.setStyleName("componentgap"); headerPanel.add(title); headerWidget.add(headerPanel); //Menu 1 Panel HorizontalPanel menu = new HorizontalPanel(); menu.setStyleName("menu1"); menu.setHorizontalAlignment(HorizontalPanel.ALIGN_LEFT); Label componentLabel = new Label("Component"); componentLabel.setStyleName("componentgap"); componentLabel.setWidth("50px"); menu.add(componentLabel); //Outbound Routing Menu Item final Label outRouteMenu = new Label("Routing"); outRouteMenu.setWidth("75px"); outRouteMenu.setStyleName("menu1button"); ``` I have to set the headerPanel and headerWidget to 100% as I want the top page bars to take up the whole widt…

Accepted Answer

You'll have to set the width of the cells (``), not the width of the widgets within the cells. So in your CSS, you can use: ``` .header td { ... } ``` Or you can use the API: ``` horizontalPanel.setCellWidth(horizontalPanel.getWidget(0), "0%"); ``` An alternative would be to use `

`s instead of a table.

GWT component spacing on HorizontalPanel

Solution

Problem