Button.setStyleName("black") -> Oops.

Flow
1

I love your black buttons.
But instead of setting the style of the containing Layout to black, I directly set the style of the button to black (so I’ve a white background around the button).

The result is wired:


Click screencast link to see a screenshot

Note: sorry, this screencast image will probably disapear in 1 week.

I does the same for FireFow and IE.

Is it bad to do button.setStyleName(“black”) ?

Thanks.
John.

2

This is a thing I haven’t “designed”, so the behavior is currently undefined. And as you can see, not a terrificly pleasing one.

I guess it should be possible to trigger the black style without the containing layout, but that would require another set of unmaintainable CSS selectors to the button theme, and I’m currently a bit wary of touching the button styles.

But I’m planning a set of tools for my own needs that would make this kind of refactoring much easier.

Until then I just suggest, as a workaround, you add one containing layout (preferably CssLayout, from 6.1, low overhead), and add another stylename for that. Then in your own theme set the background color back to transparent

.v-csslayout-stylename {
  background: transparent;
}

You’ll end up with two additional DIV’s in the DOM, but I could live with that for now.

3

Thank you Jouni.

4

I’ve just tried and it works fine, thank you again, Jouni.

		Button button = new Button(name);
		
		CssLayout transparentLayout = new CssLayout();  // trick for reindeer black buttons:  http://vaadin.com/forum/-/message_boards/message/66365
		transparentLayout.setStyleName("black");
		transparentLayout.addComponent(button);