Styling a single tab sheet caption

Vaadin 6 / 7 / 8 Framework UI
1

Hello everyone,

I have a standard Vaadin Tab sheet. Similar to Eclipse, every tab contains an editor for a document. If the document has been changed, but not saved (“dirty”), I change the tab name (adding a * character in front of the document name) and I would also like to change the font color and font weight for dirty sheets.

I have two questions about this now:

  2. What does the SCSS rule for the sheet caption look like? I had a look at
    https://vaadin.com/book/vaadin7/-/page/layout.tabsheet.html
     but I could not really find anything related to the styling of the tab caption…
  3. To which component do I have to assign it such that it only affects one tab and not all of them? I think I have to assign it to the root component of the tab itself, but I’m not sure… What I do know is that the “Tab” interface does not have the “addStyle” method, so I cannot assign it to that.

I’m using the default Reindeer theme, if it makes any difference. I’m still new to CSS and the best I’ve managed so far was to style a label, so please excuse the noob-ish nature of this post.

EDIT: I’ve managed to change the tab styling of ALL tabs by applying the following SCSS style to the tabsheet component:

.dirtyTabCaption{
.v-tabsheet-tabitem .v-captiontext {
font-weight: bold;
height: 16px;
line-height: 16px;
}
}

… but unfortunately this adds the style to all sheets. I’d like to assign it to one single sheet.

2

You can use the
TabSheet.Tab.setStyleName()
 method.

3

Hi Johannes,

ah, thank you, how could I overlook that? I don’t know. I had such a fixed idea that this has to be set in the tab sheet that I didn’t look for another way to do it. Will try it right away, thank you!

Martin

4

Hello everyone,

it’s me again. After trying to accomplish my goal for several hours now without success, I’d like to request your help.
Here’s the SCSS piece that I’d like to use:


.dirtyTabCaption{
.v-captiontext {
font-weight: bold;
color: red;
}
}

I’m trying to assign this style to an instance of

com.vaadin.ui.TabSheet.Tab

 using

Tab#setStyleName()

 as advised by Johannes. I know that the SCSS file is syntactically correct (since there are no compile errors at startup), I know that the style is found and Firebug tells me that the style is assigned to the tab. And the tab caption does indeed have the
v-captiontext
 class, or at least that’s what Firebug says. Still, the intended change in appearance simply does not happen, which is a complete mistery to me - I must admit that I’m new to CSS, but no matter how hard I try, it simply won’t do what I want it to do and it will not even give me a hint as of why it is not working as expected -_-

Any help would be much appreciated. I’m using the default Reindeer theme.

Thanks,

Martin

5

Not sure how it looks in Firebug, but if the Tab element has BOTH the CSS classes “dirtyTabCaption” and “v-captiontext” on them, then it will not fire your rule because the “v-captiontext” element needs to be nested in an element with “dirtyTabCaption” set. This is how you nested your CSS.

While I haven’t tried, if you want this only if the Tab has BOTH set, the syntax is more like this I think:

.dirtyTabCaption.v-captiontext {
font-weight: bold;
color: red;
}

And if that doesn’t work, make sure Firebug doesn’t show your font-weight or color attributes crossed out (overridden by other CSS), in which case adding !important may be needed.

6

Actually the style name set for a tab seems to be appended to a vaadin style name, so the correct css would be:


.v-tabsheet-tabitemcell-dirtyTabCaption{
.v-captiontext {
font-weight: bold;
color: red;
}
}

7

Hello everyone,

thank you for your replies. I’ve tried what you proposed, unfortunately without success. I’ve changed my SCSS rule to:


.dirtyTabCaption{
.v-captiontext {
font-weight: bold !important;
color: red !important;
}
}

… but it is still being ignored by the browser. Here’s what Chrome’s “Inspect this Element” says:

As Teppo pointed out, Vaadin automatically adds the prefix to the corresponding element. In this case, “.dirtyTabCaption” was turned into “v-tabsheet-tabitem-tabitemcell-dirtyTabCaption” by the

tab#setStyleName(…)

 method. However, the div element that should receive the styling (the one with the “v-captiontext” class) is not reacting at all to my CSS styling. I’ve tried to specify the fully qualified CSS style name both in the CSS and in the Java code, but no success. Adding “!important” did not impress my web browser either, it still displays the default styling.

Any further ideas what I could be doing wrong here?

EDIT: Yes, at long last, it is finally working! Here’s the trick: in the Java code, I still refer to the style as “dirtyTabCaption”, but in my CSS, I named the selector:

.v-tabsheet-tabitemcell-dirtyTabCaption

, so the fully qualified version. Finally it works, thanks guys!

8

Hi,

I just tried this out and it works on Vaadin 7.1.8. Did you input exactly the CSS from my previous post to your theme?

Please confirm with Firebug that the style is found by the browser by selecting the targeted v-captiontext div and looking at the Style or Computed tabs on the right hand side. If your styles are not visible there at all, then you probably have some selector wrong or there is an issue loading the most current CSS. If it is there, but is overridden by some other CSS rule, please post back and we’ll figure out how to overcome that.

9

Just to clarify exactly how to do it.

In Java code:

yourTab.setStyleName("foo");

and in your SCSS file:

.v-tabsheet-tabitemcell-foo{
     .v-captiontext {
       font-weight: bold;
       color: red;
     }
   }
10

I think it’s actually something of a bug or at least an incomplete feature that the tab stylenames work like that. When adding a stylename to a Component, the corresponding element gets both the exact stylename and the prefixed one; tabs should probably work the same way.

11

@Teppo: Yeah, that’s the exact way I solved it. See my edit of my previous post.

@Johannes: I see. Right now I was asking myself if I have to do this
everywhere
in Vaadin, which would explain why some of my CSS styles are not working out as expected. But at least I have one more alternative to try now if it does not work.

By the way: can we
please
get an error message like “style xyz not found” or something in the log if things like this happen? Would be very helpful for debugging purposes.

Thanks to everyone for seeing me through this :slight_smile:

12

Hi,

Im using Vaadin 7.6.5, I would like to change to background color of one of the Tabs, im able to this via Firebug on CSS selector, but this selector is of type “element.style”
element.style {
background: darkblue none repeat scroll 0 0;
width: 67px;
}
The div - <div id=“gwt-uid-7” class=“v-caption” style="width: 180px; background

This is the outcome i would like to accomplish in attached screenshot.

25410.png

13

Hi,
Got this right after a clean build, for some reason the style sheet didnt compile, or browser cache gotcha :slight_smile:

For other - use this style rules and assign like below on the Tab :
SCSS :
.v-tabsheet-framed .v-tabsheet-tabitemcell-la-tab-friendly{
.v-caption {
background-color: #2c9720;
background-image: linear-gradient(to bottom, #2f9f22 2%, #26881b 98%);
}
}

JAVA :
tabsheet.addTab(buildTabReserveNow(), “Reserve Now”, FontAwesome.CREDIT_CARD).setStyleName(“la-tab-friendly”);

14

myTheme:

.v-tabsheet-xxxxx{
        .v-tabsheet-tabitemcell{
            .v-caption {
                padding:10px;
                background-color: #1c1d22;
                color: #fff;
                font-weight:bold;
            }
            .v-tabsheet-tabitem-selected .v-caption.v-caption {
            border-bottom-color: #ff751a;
            color: #ff751a;
            }
        }
    }

and

xtabsheet.addStyleName("xxxxx");
15

@Narges poursaleh Thanks!!