GWT-Komponente Abstand auf HorizontalPanel
Ich habe den folgenden code, um das layout-Menü für meine Seite:
//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");
Habe ich die headerPanel und headerWidget zu 100%, wie ich will, die top-Seite-bars zu nehmen, bis die gesamte Breite des Bildschirms. Allerdings, wenn ich Beschriftungen hinzufügen, um das Menü Sie sind als gleichmäßig verteilt über den Bildschirm, anstatt auf der linken Seite neben einander, wie ich will. Wie Sie sehen können ich habe versucht, zum festlegen der Breite des Labels explizit zu zwingen, kleiner zu sein und daher neben einander in der Menüleiste.
Irgendwelche Ideen, wie ich diese erreichen können? Sie werden sehen, ich bin mit styles habe ich auch diese unter aber werden Sie nicht intefer mit der Breite einer Komponente.
Danke,
James
Derzeit habe ich so etwas wie dieses:
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;
}
InformationsquelleAutor James | 2010-10-25
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie die Breite der Zellen (
<td>
), nicht die Breite des widgets in die Zellen. Also in der CSS, die Sie verwenden können:Oder verwenden Sie die API:
Alternative wäre die Verwendung
<div>
s statt einer Tabelle.HorizontalPanel ist, umgesetzt als HTML-Tabelle. Etiketten umgesetzt sind als divs verwenden, so können Sie divs z.B. durch die Verwendung von Etiketten in ein FlowPanel. Verwenden Sie CSS, um gelten
float: left;
zu Ihrem Label divs. Solche floating divs Verhalten sich anders im Vergleich zu einer Tabelle - Experimentieren Sie und finden Sie heraus, welche Lösung für Sie am besten funktioniert 🙂Ich verwendet FlowPanel, wie Sie vorgeschlagen und es funktionierte, vielen Dank.
InformationsquelleAutor Chris Lercher