Failed to customize the javafx tab, the top edge of the panel does not appear

Question

Failed to customize the javafx tab, the top edge of the panel does not appear

Navigation

#1 by (2 votes)

1

I would like the TabPanel area that does not have a tab to have a border as the image below.

Currently my TabPanel is like this, no border to the right of "Enter"

Iwouldlikeittolooklikethis,butIdonotknowwheretoputinstructionfromtheborder,withoutputtingborderalsoonwhatisselected.

This is my style code:

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}
.tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 1px 1px 0px 0px;
}
.tab-pane
{
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
    -fx-min-width: 120px;
    -fx-min-height: 23px;
    -fx-border-width:  1 1 0 0;
    -fx-border-style: solid;
    -fx-border-color: #dbe2e8;
    -fx-padding: 7 20 7 20;
}
.tab:selected .focus-indicator {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

.tab-pane .tab:selected
{
    -fx-background-color: #ffffff;
}

.tab-label {
    -fx-alignment: center;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill:  #7d97ad;
    -fx-font-family: Arial;
}

.tab:selected .tab-label {
    -fx-alignment: center;
    -fx-text-fill: #96b946;
}

I'm learning now, so I'm pretty much a layman in JavaFx.

java css javafx fxml

asked by anonymous 12.08.2017 / 13:14

1 answer

Enable 'Access-Control-Allow-Origin' in jQuery [xml] Fatal error: Uncaught Error: Call to a member function query () on null in

score 2 · Answer 1

It should be changed in the style where it is:

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

For the code below

   .tab-pane .tab-header-area .tab-header-background {
        -fx-background-color: #ffffff; /* Altera a cor do plano de fundo do header para a mesma cor do fundo da aplicação */
        -fx-border-color:  #dbe2e8; /* Define a cor da borda para a mesma cor da borda das abas *?
        -fx-border-width: 0px 0px 1px 0px;  /* Define que a borda inferior terá 1 px (top, left, bottom, right) */
    }

In this way the system will make the background of the tab header the same as the application, giving the impression that it has disappeared, but the bottom border will still exist and the layout is right.