Failed to customize javafx tab, top panel border does not appear

Asked

Viewed 243 times

1

I would like the Tabpanel area that has no tab to have a border according to the image below.

Currently my Tabpanel is like this, no right edge of "Enter"

inserir a descrição da imagem aqui

I would like it to be like this, but I do not know where to put edge instruction, without putting edge also on what is selected.

inserir a descrição da imagem aqui

That’s 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 Javafx layman.

java css javafx fxml
  • 1

    take your style code to .tab-pane .tab-header-area .tab-header-background

  • @Juliocesar changed the style instead of taking and it worked, it was right there that I had to stir

1 answer

2

Should be changed in the style where it is: 

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

To 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) */
    }

This way the system will make the tab header background area the same as the application, giving the impression that it is gone, but the bottom edge will still exist and the layout was right.

Browser other questions tagged java css javafx fxml

You are not signed in. Login or sign up in order to post.