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 width of the screen. However, when I add Labels to the menu they are being spaced evenly accross the screen rather than on the left next to each other as I want. As you can see I tried to set the width of the Labels explicitly to force them to be smaller and therefore next to each other in the menu bar.

Any ideas how I can achieve this? you will see I am using styles I include these below but will point out they do not intefer with the width of a component.

Thank you,

James

Currently I have something like this:

CSS:

.header { 
        background-color:       #669966;
        border-bottom-color:    #003300;
        border-right-color: #003300;
        border-top-color:   #99CC99;
        border-left-color:  #99CC99;
        color:                  #FFFFFF;
        padding:                0px;
        border-style:           solid;
        border-width:           1px;
        margin:                 0px;
        font:                   bold 165% "Trebuchet MS",sans-serif;
        }

.menu1 {
        background-color:      #336633;
        border-bottom-color:   #003300;
        border-right-color:    #003300;
        border-left-color:     #99CC99;
        border-top-color:      #99CC99;
        color:                 #FFFFFF;
        padding:               0px;
        border-style:          solid;
        border-width:          1px;
        font:                  85% "Trebuchet MS",sans-serif;
       }

.menu1button {
             background-color:      #336633;
             border-bottom-color:   #003300;
             border-right-color:    #003300;
             border-left-color:     #99CC99;
             border-top-color:      #99CC99;
             color:                 #FFFFFF;
             padding:               0px;
             border-style:          solid;
             border-width:          0px;
             margin:                5px;
             font:                  85% "Trebuchet MS",sans-serif;
             }

.menu1selectedbutton {
             background-color:      #669966;
             border-bottom-color:   #003300;
             border-right-color:    #003300;
             border-left-color:     #99CC99;
             border-top-color:      #99CC99;
             color:                 #336633;
             padding:               0px;
             border-style:          solid;
             border-width:          0px;
             margin:                5px;
             font:                  85% "Trebuchet MS",sans-serif;
             }



.menu2 {
        color:#A6A6A6;
        padding: 0px;
        border-style:none;
        margin:0px;
        font: 85% "Trebuchet MS",sans-serif;
        }

.menu2button {
            color:#336633;
            padding: 0px;
            border-style:none;
            margin:5px;
            font: 85% "Trebuchet MS",sans-serif;
            }

.menu2selectedbutton { 
                        color:#336633;
                        background-color:     #669966;
                        padding: 0px;
                        border-style:none;
                        margin:5px;
                        font: 85% "Trebuchet MS",sans-serif;
                    }

.componentgap{
                margin: 4px;

}

Solution

You'll have to set the width of the cells (<td>), 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 <div>s instead of a table.

Comments

[James]

I don't specifically use a table. In fact I do use div's in my landing HTML page. How do I use div's ad you suggest? Thanks

[Chris Lercher]

@James: HorizontalPanel is implemented as an HTML table. Labels are implemented as divs, so you can use divs e.g. by using your Labels in a FlowPanel. Use CSS to apply float: left; to your Label divs. Such floating divs behave differently compared to a table - experiment and find out which solution works best for you :-)

[James]

I used FlowPanel as you suggested and it worked a treat, thanks.