Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Setting raw CSS properties
So, I know I'm in the "themes" forum and what I'm asking for is total heresy :) But I want to just apply raw CSS properties in some places. That is, I want to bypass the theme, and style.css, and just set explicit properties. (Why? I already have the look-and-feel defined through a different mechanism which I would rather not re-work.)
In HTML, it would be:
<div style="background-color: #CCCCCC">
.. as opposed to:
<div class="some-style-name">
Is this possible in Vaadin?
Oh, that is too bad.
To make that work, I would need use the plug-in, and also keep track of what styles have already been injected, so I don't end up defining the same thing over and over. Somehow I suspect this is just one of many places where I will be fighting against the framework ... I know my use-case is non-standard.
I guess I will look for a different framework, something closer to the browser ...
You’re right about that you’re fighting a bit against the framework. But your use case is probably not that unusual (at least many have wanted this feature for quite a while).
Something like this could end up in Vaadin 7, and with persistent lobbying possibly in Vaadin 6 as well. We already have the “executeJavaScript” method for allowing raw JS to be executed, so adding raw/inline CSS to the mix wouldn’t be far fetched.
Also, an add-on should be able to do this easily, using a similar approach as many other add-ons, having a non-visible component through which these styles would be inserted. Something like this (if I were to add this to the CSSInject add-on):
// Server side API
cssinject.setInlineStyle(component, “background-color: #ccc;”);
// Server side impl.
paintContent(PaintTarget target)... {
...
target.startTag(“styles”);
for(Component c in componentStyles) {
target.startTag(“c”);
target.addAttribute(“id”, c);
target.addAttribute(“style”, componentStyles.get(c));
target.endTag(“c”);
}
target.endTag(“styles”);
}
// Client side
updateFromUidl(UIDL uidl, ApplicationConnection client) {
...
// Loop through the “styles” child element
for(...) {
Paintable p = client.getPaintable(componentUidl.getAttribute(“id”));
// We should take in to account if there are other styles applied, but for simplicity we’ll skip that
((Widget) p).getElement().setAttribute(“style”, componentUidl.get(“style”));
}
}