When I add the style Reindeer.LAYOUT_BLACK to a layout, the buttons inside have a 1 pixel black vertical button on the left and a similar horizontal line below them which is a bit harder to spot because it’s on a dark background. Like this:
I see this with Safari 5, Firefox 3.6 and Opera 11.10 so I don’t think it’s a browser issue.
Anyone else who sees this problem? Any ideas on how to fix it?
Hi,
Seems odd. Can you reproduce this error on
http://demo.vaadin.com/ReindeerTheme
?
Do you have some zoom level (other than 100%) in use? Do you have a custom theme on top of Reindeer – if so, try removing that.
And what version of Vaadin are you using?
Aha, the plot thickens!
Turns out we’re using reindeermods. We have a styles.css file that starts with @import “…/reindeermods/styles.css”. If I change that to @import “…/reindeer/styles.css” the buttons render correctly.
So I’ll have to check with the author of reindeermods. Mmm… what a coincidence, it’s you 
Wow, what a major oversight on my part when creating the ReindeerMods theme! Thanks for pointing this out!
I’m just wondering why no one else has mentioned this before. I guess the black style isn’t used that much (and I agree, it’s hardly usable, another oversight on my part when creating the Reindeer theme).
Anyhow, the problem is in the custom button styles in the ReindeerMods, which alters the paddings and height of the button. You should be able to fix the black buttons with the following additional CSS in your theme (more or less):
.black .v-button,
.black .v-disabled.v-button{
height: 26px;
padding: 0 0 0 6px;
}
.black .v-button-wrap,
.black .v-disabled.v-button .v-button-wrap {
height: 22px;
}
That does indeed solve the problem :). Thank you!
Hi Jouni,
we have seen it and just assumed it was some random/minor issue. You can switch to native button and the line goes away.