RE: How can I set a style within a Label and NOT have it affect the whole p

Vaadin 6 / 7 / 8
1

The methods addStyleName and setStyleName are good for this purpose. With them you can set component instance specific custom stylename and rules in your theme scss file specific to that stylename.

2

So for example I set the following html code in my Label:

Label label = new Label();
label.setContentMode(ContentMode.HTML);
label.setValue("<style> * { font-size: 12px; font-family: Arial; } </style> hello world");

The problem with the above code is that it sets the whole page to the font-family Arial and NOT just the Label. If I use a RichTextArea then it ONLY sets the style to that component but for whatever reason any css styles defined in the Label are applied to the whole page…

FYI - If you set a RichTextArea to read only you get the exact same issue…

3

I understand but unfortunately the html that’s piped to setValue() is user generated. Well more or less due to XSS concerns (it’s pre-sanitized). The key is that I need to be able to funnel the style code to setValue() because that html snipped is used to generate a PDF, etc. and it’s all self contained. In other words it’s a user generated report…

4

What if instead of using a Label you create a self-containing HTML document and place it inside a BrowserFrame?

-Olli

5

That’s what I tried do with a RichTextArea and did a setReadOnly(true) but that resulted in the same. The RichTextArea works very well however it also contains all the actions with it.

6

If you want to set the styling for the Label as inline styling, you need to probably define the HTML element you want to style in the setValue method, and then you can set the style attribute for it, e.g.:

Label l = new Label("<span style=\"font-size: 20px; font-family: Arial;\">hello world</span>",ContentMode.HTML); Would that work for you?

  • Katri
7

Is it possible to re-use a BrowserFrame? That is reset the data if they re-run the report? Without having to complete re-construct it each time that is.

8

Unfortunately I can’t guarantee that the styling will only be inlined.

9

You’ll need to extend BrowserFrame to expose the protected methods to do that, and I’m not certain that it’ll work, but it’s worth a try.

-Olli

10

Another quick question Olli, Do you know if it’s possible to set up a BrowserFrame without a height so that it takes whatever height is required? I tried -1px but that didn’t work. Basically I’m trying to prevent the scrollbar from appearing on the side since some reports can be quite large.

11

Katri Haapalinna:
If you want to set the styling for the Label as inline styling, you need to probably define the HTML element you want to style in the setValue method, and then you can set the style attribute for it, e.g.:

Label l = new Label("<span style=\"font-size: 20px; font-family: Arial;\">hello world</span>",ContentMode.HTML);

Would that work for you?

  • Katri

this seems to no longer work in Vaadin (tried with 14 and 16)

12

this seems to no longer work in Vaadin (tried with 14 and 16)

With Vaadin 14 etc. it is recommend to use Html component for this

Html l = new Html("<span style=\"font-size: 20px; font-family: Arial;\">hello world</span>");

13

Thanks Tatu! works like a charm!