Tabsheet background

Andy A

Attached is what I have right now. As you can see, the tabsheet is white and the background is lavender. Is there a way to make the Tabsheet the same color as the background?

I'm using 7.4.6 and the default valo scss

Thanks

tabsheet.png (1.8 kB)

Joacim Päivärinne

Hey Andy,

I think the default tab style does not have a background color set. It seems that you are using the "framed" (ValoTheme.TABSHEET_FRAMED) style, is that correct? If so, then you can change the background colors with the following SCSS:

.v-tabsheet-framed {
  > .v-tabsheet-content > div {
    background-color: transparent;
  }
    
  > .v-tabsheet-tabcontainer {
    // Non-selected tabs.
    .v-caption {
      background-color: transparent;
    }
    
    // Selected tab.
    .v-tabsheet-tabitem-selected .v-caption {
      background-color: transparent;
    }
  }
}

You could also replace "transparent" with "lavender".

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Tabsheet background

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.