Vaadin: Panel

[Swoop]

Hallo,

ich nutze seit neustem intensiver Vaadin. Jetzt möchte ich gerne eine Panel mit Textfeldern als suche und eine Tabelle nutzen.
Aber ich kann das Panel einfach nicht so ausrichten wie ich es möchte. Momentan sieht es so aus:

Allerdings möchte ich gerne den Rand um die Textfelder verkleinern und einen kleinen 5-10px großen Abstand zwischen die Tabelle und das Panel machen. Ich bekomm beides aber leider nicht hin.
Weiß zufällig jemand wie ich die Sache angehen kann?

Grüße Swoop

 

[Noctarius]

Ich vermute mal du nutzt für die Textfelder ein VerticalLayout? Wenn ja, dann gibt es dort eine Methode setSpacing() um Abstand zwischen den Textfeldern zu definieren:
https://vaadin.com/api/com/vaadin/ui/AbstractOrderedLayout.html#setSpacing(boolean)

 

[Swoop]

Ich vermute mal du nutzt für die Textfelder ein VerticalLayout? Wenn ja, dann gibt es dort eine Methode setSpacing() um Abstand zwischen den Textfeldern zu definieren:
https://vaadin.com/api/com/vaadin/ui/AbstractOrderedLayout.html#setSpacing(boolean)

Jetzt siehts mal schon besser aus. Allerdings hätte ich gerne den Rand um die Textfelder (Panel->Textfelder) etwas weniger. Geht das auch?

 

[Noctarius]

Japp aber nur per CSS Styling https://vaadin.com/book/-/page/components.textfield.html Punkt 5.6.5 und dann https://vaadin.com/book/-/page/themes.creating.html

 

[Swoop]

Danke erstmal aber wie soll ich das mit CSS formatieren?

nutze ich padding oder Border am Panel ändert sich nichts. Stell ich das Margin der Textfelder auf einen negativen Wert verschwindet der Anfang.

 

[Noctarius]

Achso du willst nicht den grafischen Rahmen entfernen?

Willst du um die Textfelder auch einen Abstand (margin)? Ich glaube fast du verwendest hier Begrifflichkeiten falsch

 

[Swoop]

hm ja ich glaube du hast recht. Border war der falsche begriff.

Also ich möchte nicht den grafischen Rahmen entfernen sondern nur den Abstand zwischen Textfelder und Panel-Rahmen verkleinern.
Als Beispiel soll das "Zeitpunkt(von)"-Textfeld weiter in die linke obere Ecke rutschen.

setMargin auf dem Layout der Textfelder funktioniert nicht. Genauso wenig wie margin oder padding im css zu setzten ...

Grüße Swoop

 

[Noctarius]

Hmm zeig mal etwas code wie du das konstrukt aufbaust.

 

[XHelp]

setMargin auf dem Layout der Textfelder funktioniert nicht

Ich würde das selbe noch mal auf dem eigentlichem Panel versuchen, denn der kann genau so gut Spacing und Margin haben.

 

[Swoop]

Hm also ich hab auf dem Panel geschaut und kenie Methoden für Margin und Spacing gefunden.

Allerdings hab ich die Anwendung nun ein bisschen abgewandelt und auch das Panel wieder rausgeschmissen.
Das eigentliche Problem bleibt aber dasselbe.
Hier mal ein aktuelles Bild:

Mein Code dazu:

private void createSearchLine()
	{
		if (visbileColumnsAvailable()) {

			VerticalLayout vLayout = new VerticalLayout();
			vLayout.setStyleName("v-vLayout-searchline");

			HorizontalLayout hLabelLayout = new HorizontalLayout();
			hLabelLayout.setSpacing(true);

			HorizontalLayout hTextLayout = new HorizontalLayout();
			hTextLayout.setSpacing(true);

			//Erzeugen der Textfelder und Labels und hinzufügen zu den Layouts

			Button searchBtn = new Button("Suchen");
			searchBtn.setIcon(getIcon16("search.png"));

			hTextLayout.addComponent(searchBtn);

			vLayout.addComponent(hLabelLayout);
			vLayout.addComponent(hTextLayout);
			getLayout().addComponent(vLayout);
		}
	}

Und xml:

.v-vLayout-searchline {
	margin-bottom: 15px;
}

Also kein Schimmer warum der nicht am zwischen Tabelle und layout mit den Suchfeldern einen kleinen Platz reinbaut.
SetMargin kann ich hier ja nicht benützen weil ich den Rand nur unten und nicht auf allen Seiten möchte ?

Grüße Swoop

 

[Swoop]

Es hat jetzt auf einmal doch funktioniert ... ich weiß zwar nicht wiso aber auf einmal gings ...

Trotzdem Danke für eure Antworten