Hie
I was trying to skin the panel component…
I applied following css:
.v-panel {background: yellow;}
this colors the panel header and a small border area in yellow. But in the centre there is still white portion i can see.
So how to color that as well?
what property should i use?
Did you see the panel-example in the Book of Vaadin (see 8.2.3)?
http://vaadin.com/book/-/page/themes.css.html
Maybe this helps.
Cheers, Maik
sorry did not help… i was missing .v-panel-content property but that gave a coloured outline instead of filling entire white space.
I am attaching the snapshot here wht my component looks like.
It is created by putting a form component inside a panel component.
and the css looks like:
@import url(…/reindeer/styles.css);
.v-form {background: #E3E5DB;
padding: 5px;}
.v-panel {background: yellow;}
.v-panel-content {background:red;}
.v-textfield {background-color: #CCFF9D; }
So please suggest how to fill the white space.
Depending on the browser, you may need to override additional components. This is true for Chrome/Safari in particular. I had to use the “inspect element” right-click feature – look at the right hand side and play with the checkboxes to turn specific rules on and off.
See this post for help:
Setting image as background of panel
(see the last code snippet in that message).