JavaFX Tab-content-area Rahmen

[sharkattack]

Ich bin gerade beim Styling meines Programms mit CSS. Ich möchte gerne einen Rahmen um den Inhalt des aktiven Tabs machen. Dies klappt mit folgendem Code auch:

.tab-content-area {
    -fx-border-radius: 0 15 15 15;
    -fx-border-width: 1 1 1 1;
    -fx-border-color: #87b644;
}

Leider wird die Linie vom Rahmen auch über den Header des aktiven Tabs gezeichnet. Kann man dies irgendwie vermeiden?
So sieht es im Moment aus:
https://www.dropbox.com/s/paln1d4rxqa1orl/rahmen1.jpg?dl=0
So sollte es aussehen:
https://www.dropbox.com/s/4isuy9p5u82fiwq/rahmen2.jpg?dl=0

LG

 

[dzim]

CSS kann mitunter recht schwierig sein. Ich empfehle dir, dir mal die modena.css (das Default-CSS von JavaFX) anzuschauen. Alles, was du nicht überschreibst, wird von dort geladen.
Bsp: https://gist.github.com/maxd/63691840fc372f22f470 (leicht veraltete Version)

Ich glaube, was du machen müsstes, wäre dem Tab selbst unten einen Border zu geben, der die Hintergrundfarbe hat, und dann irgendwie seinen Border *über* den Ramen vom Content zu schieben (mit negativ-padding könnte das vielleicht gelingen). Andere Ideen habe ich auch nicht.

#edit: oder background oder border insets, anstelle vom padding...

#edit2: hab noch etwas herumgespielt und keine sinnvolle Lösung gefunden. Wenn ich den ausgewählten Tab per "-fx-translate-y" verschiebe, landet er hinter dem Content - nicht sinnvoll. Bin mir also nicht sicher, ob das machbar ist...

 

[dzim]

Hab noch etwas probiert: Auch im Code wird es schwierig (via Reflection). Das Problem ist, dass TabPane stark auf StackPanes setzt und das Header-Pane scheint nicht im Vordergrund zu sein (obwohl ich es versucht habe, hochzuholen). Dadurch kann man translaten wie man will... Sorry, aber weiter komme ich damit im Moment nicht.

 

[sharkattack]

Hallo dzim

Besten Dank für deine Antwort und dass du dir die Mühe gemacht hast rumzuprobieren. Ich habe gestern noch einige Stunden alles mögliche getestet und bin dann durch herumprobieren mit den Zeilen aus der modena.css zu einer für mich zufriedenstellenden Lösung gekommen. Uns zwar habe ich vom content den Rahmen oben entfernt und stattdessen die CSS um die folgenden Zeilen ergänzt:

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: #87b644, #3c3c3c;
    -fx-background-insets: 0, 0 0 2 0;
}

Eigentlich wollte ich abgerundete Ecken haben, das scheint aber für das rechte obere Eck nicht möglich zu sein. Wenn man nämlich dort einen Radius setzt, zeigt die Rundung nach oben, statt nach unten, was ja eigentlich auch logisch ist. Ich habe noch versucht mit Minus-Werten zu arbeiten, allerdings war er darüber nicht sehr erfreut. 🙂

LG

 

[dzim]

Am Ende zählt: Hauptsache, es gefällt dir! 😉
Kannst du vielleicht noch einmal einen Screenshot posten, damit man es sich besser vorstellen kann?
Und wenn du einverstanden bist, poste doch mal das gesamte CSS für ".tab-pane" - denn um ehrlich zu sein, bin ich mit meiner im Moment verwendeten Lösung auch noch nicht zu 100% zufrieden. 😀

 

[sharkattack]

Hier mal ein Screenshot vom Programm:
https://www.dropbox.com/s/opx7nmtq2mmlu2a/Adressbuch.jpg?dl=0
Ist noch nicht alles angepasst, aber die wichtigsten Sachen.
Den Teil der CSS stelle ich in etwa 15 bis 20 Minuten hier rein. Ich muss vorher noch kurz was erledigen.

LG

 

[dzim]

Mach mal das ganze CSS rein... Sieht ja nicht so schlecht aus... ;-)

 

[sharkattack]

Ich habe im Moment leider nur den Teil fürs tab-pane. Ich bin jetzt wieder an meinem Arbeitsplatz und habe mir vorher nur kurz den tab-pane Teil als E-Mail zugesendet:

.tab-pane .tab-header-border {
    -fx-border-width: 2 2 2 2;
    -fx-border-color: #87b644;
}

.tab-pane {
    -fx-tab-min-width: 250px;
    -fx-tab-max-width: 250px;
    -fx-tab-min-height: 50px;
    -fx-tab-max-height: 50px;
}

.tab {
    -fx-border-radius: 15 15 0 0;
    -fx-background-radius: 15 15 0 0;
    -fx-background-insets: 0 1 0 1,0,0;
}

.tab-content-area {
    -fx-border-radius: 0 0 15 15;
    -fx-border-width: 0 2 2 2;
    -fx-border-color: #87b644;
}

.tab-pane .tab {
    -fx-background-color: #87b644;
    -fx-border-width: 0 0 2 0;
    -fx-border-color: white white #87b644 white;
}

.tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
/* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

.tab-pane .tab:selected {
    -fx-border-width: 2 2 0 2;
    -fx-border-color: #87b644;
    -fx-background-color: #3c3c3c;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: #87b644, #3c3c3c;
    -fx-background-insets: 0, 0 0 2 0;
}

.tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 24pt;
    -fx-font-weight: 200;
}

.tab:selected .focus-indicator {
    -fx-border-width: 0;
}

.tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #87b644;
}

Den Rest kann ich falls gewünscht noch später reinstellen.

LG