Table Data is not showing when added in Custom layout...

General
1

Hello All,
I am using Vaadin 6.2.*.
I am using Table Component using customlayout, which consist of Div’s here is code snippet,


<div class="wrapcellcontent"
	style="width: 98%; border: 1px solid #cecece; margin: 10px auto; padding: 1px;">
<table style="width: 100%;">
	<tr style="width: 100%;">
		<td style="width: 100%;">
		<div style="white-space: normal" location="bankTransactionsTable"></div>
		</td>
	</tr>
</table>
</div>

When I add my Table in this customlayout, and make its height 100%, only header of table shown, if I make height in pixels then table data is already showing, I want my height in % so please tell me what should I do.
if I add same table in Vertical layout , everything works fine…


		this.setHeight("100%");
                bankTransactionsTable.setHeight("100%");
                bankTransactionsLayout.addComponent(bankTransactionsTable,
				"bankTransactionsTable");

Following is the image which shows table but with only header and no data.
11281.png

2

Hi,

You need to specify the containing table’s and its TR and TD elements a height also (currently undefined). Use either percentage values or fixed pixels, however you get it working the way you want to.

This is because Vaadin components, when set to relative size, do not “push” the containing element. They expect the containing element to have a specified size (DOM getOffsetWidth/Height will return other than zero) for percentage sizes to work.

3

Thanks Jouni for your very helpful answer,
I changed the layout according to your suggestions with,


<div style="width: 100%;height: 100%; border: 0px; clear: both">
    <table style="width: 100%;height: 100%; margin: 0px;  ">
        <tr style="width: 100%;">
            <td style="width: 100%;">
                <div style="height: 100%; width: 100%" location="bankTransactionsTable">Transaction Table</div>
            </td>
        </tr>
    </table>
</div>

and now the Grid is get data, but Still one small problem, when I used custom layout , it show a small margin 1 pixel on all corners , if I removed it and use vertical layout , the Table is added with out any margin space, in layout html I explicitly check there is no margin as such.

Here you can see that Grid has one white pixel space around all corners…
11283.png

4

That’s probably the TABLE element’s cellspacing/cellpadding playing tricks there. Just add
cellpadding=“0”
 and
cellspacing=“0”
 to your TABLE element.