Thanks Ian, the problem is resolved by setting the font size really small.
Note also that we don't have to set the font size for all the cells, only
setting the font size of the 1st row will do.
So here is my CSS for the cells in the 1st row:
.my-topLeft {
background: url(images/wb-corner.png) no-repeat 0px 0px;
width: 5px;
height: 5px;
font-size: 1px;
}
.my-topCenter {
background: url(images/wb-hborder-top.png) repeat-x;
width: 100%;
height: 5px;
font-size: 1px;
}
.my-topRight {
background: url(images/wb-corner.png) no-repeat -5px 0px;
width: 5px;
height: 5px;
font-size: 1px;
}
Then, I specify the above CSS into the grid to get a rounded corner effect:
Grid grid = new Grid(3, 3);
grid.setCellSpacing(0);
grid.setText(1, 1, "My Title");
CellFormatter formatter = grid.getCellFormatter();
formatter.setStyleName(0, 0, "my-topLeft");
formatter.setStyleName(0, 1, "my-topCenter");
formatter.setStyleName(0, 2, "my-topRight");
The above code is working fine, I have my rounded corner rectangle!
Here come with another question: I have to specify the cell spacing by
calling grid.setCellSpacing(0)
How can I move this cell spacing into the CSS?
I tried to create and set the CSS like the following:
.my {
margin: 0px;
padding: 0px;
}
Grid grid = new Grid(3, 3);
// grid.setCellSpacing(0);
grid.setStyleName("my");
But the above code doesn't work, I still have to specify the cell spacing in
the Java code :-(
Appreciate your advice, thank you!
On Mon, Jun 29, 2009 at 3:46 AM, Ian Bambury <ianbamb...@gmail.com> wrote:
> Yep. There's an in the cell so you will have to set the font size
> really small.
> You'd be better off doing all this by setting style classes and doing it in
> css.
>
> Ian
>
> http://examples.roughian.com
>
>
> 2009/6/28 hezjing <hezj...@gmail.com>
>
> Hi
>>
>> I want to achieve a rounded corner rectangle using Grid.
>>
>> Here I create a 3x3 grid:
>>
>> Grid grid = new Grid(3, 3);
>> grid.setCellPadding(0);
>> grid.setCellSpacing(0);
>> // display the border for debugging
>> grid.setBorderWidth(1);
>>
>>
>> Imagine that I have a 5x5 pixel corner images, so I specify the width and
>> height of the top row like the following:
>>
>> CellFormatter formatter = grid.getCellFormatter();
>> // top left corner
>> formatter.setWidth(0, 0, "5px");
>> formatter.setHeight(0, 0, "5px");
>> // top center
>> formatter.setWidth(0, 1, "100%");
>> formatter.setHeight(0, 1, "5px");
>> // top right corner
>> formatter.setWidth(0, 2, "5px");
>> formatter.setHeight(0, 2, "5px");
>>
>>
>> The problem is when tested in hosted mode, the cell doesn't display in the
>> specified height!
>>
>> Did I miss anything here?
>>
>>
>> Please help, thank you!
>>
>>
>> --
>>
>> Hez
>>
>>
>>
>
> >
>
--
Hez
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to Google-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
