Hello,
I have a project which I just need to list a bunch of orders on a HTML table. But when the table gets too big, it overlaps my DIV like this:
At first I thought that this could be a CSS problem, but then I noticed that the HTML tag size is SMALLER than my table size:
Now I’m a bit lost, I already set all my DIVs to have a 100% height, but because the HTML tag size is static (for some reason ), the table overlaps my DIVs. Here is how I’m generating my table:
{{#if isNewOrder}}
<h2 style="margin-left: 30px"> Pedidos Pendentes </h2>
<table cellspacing='0'>
<tr>
<th>ID</th>
<th>Data</th>
<th>Cliente</th>
<th>Telefone</th>
<th>Valor</th>
<th>Operações</th>
</tr>
{{#each tablecontent}}
<tr>
<td>{{id}}</td>
<td>{{prettifyDate timestamp}}</td>
<td>{{name}}</td>
<td>{{phone}}</td>
<td>{{prettifyPrice price}}</td>
<td>
<button type="button" class="btn btn-info">Detalhes</button>
<button type="button" class="btn btn-success">Aceitar</button>
<button type="button" class="btn btn-danger">Rejeitar</button>
</td>
</tr>
{{/each}}
</table>
{{/if}}
No big deal right? I have two session variables (isNewOrder
and tablecontent
), isNewOrder
tells if I should show that table or not, and tablecontent
contains all the elements of my table.
So, am I missing something about big lists with Meteor? Or could it really be a problem with my CSS (despite I set all DIVs to 100% of height).
Best Regards, Ernani