Hi guys,
I add a border in GridLayout using CSS but it only shows outside border… how do you add border in each cell in GridLayout?
As I recall from other Forum threads, including
my own thread
, there is no way to draw borders directly on the cells of a GridLayout.
An alternative is to add borders to your content within the cell. I understand that may not give you the results you desire.
When I wanted divider lines to separate areas within my GridLayout, like this:
…I played around with adding extra rows or columns. I added a Label to span across the cells of the row or column. I displayed a non-breaking space character to effectively make the text portion of the Label invisible. Then I used CSS to add a border along the Label. This sorta/kinda works, but left me unsatisfied.
Someday if I get the nerve to try making a Vaadin component, I’ll make a simple dividing line. I put in a
ticket
requesting such a widget.
Another alternative is using combining Layouts inside one big Layout. The child Layouts can have a CSS border.
–Basil Bourque
Panel panel = new Panel(); panel.setStyleName( "bordered" );
/* Grid with grid! */
.v-gridlayout-grid {
margin: 0px;
padding: 0px;
border: 1px solid gray;
}
.v-gridlayout-grid > div {
margin: 0px;
padding: 0px;
border: 0px solid gray;
}
.v-gridlayout-grid > div > div {
margin: 0px;
padding: 0px;
border: 0px solid gray;
}
.v-gridlayout-grid > div > div > div {
margin: 0px;
padding: 0px;
border: 1px solid gray;
}