how to apply styles for part of the text in caption


I have a requirement that i need to set the style name for part of the text in the caption of a component.Say for an example “Vaadin Example” .The first text “Vaadin” should be in bold font and the next “Example” should be in normal font.The String (“Vaadin Example”) has been built and assigned to the caption. As the setCaption method accepts a String parameter the html tags could not be added in line with the string. Could someone please help me how can i achieve this in vaadin?


is it necessary to use the caption of the element? If not, you could use a label instead. There you can set the content mode to XHTML.


Yes. I have to use. i am using the caption for the pop-up window. if we set the caption for the pop-up

then the close button and the caption text will be in the same horizontal line.But if we use any other component like label then the alignment is not proper.


You may try to create custom style for window component by override the window.css.
and goto section (v-window-outerheader) and (.v-window-header ).

from there you can do more to customize the caption.


Thanks for your quick turn around.I tried already the following style sheet property(.popupContent .v-window-outerheader .v-window-header).But is not working.If i use the above css property y the whole caption String is affected.

Without getting HTML as the caption (with different style names for different parts of the string), you cannot really do this.
Captions in Vaadin do not support HTML, so if you cannot find a way to do this with a Label, you would need to customize client side code for this.

Enabling HTML mode for all subwindow headers everywhere might have its problems (special characters interpreted differently, risk of XSS attacks if some caption somewhere can come from user entered text, …), but might work in a small application.

You would most likely need to override the client side method VWindow.setCaption(…) and not escape the header text.
You might be able to replace the class VWindow with your custom subclass using GWT deferred bindings as its instances are created with GWT.create().

In case anyone comes here, nicely enough this is currently supported by setting the value Window.setCaptionAsHtml(true).