Table grow size bigger than HTML tag


#1

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 :confused: ), 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


#2

It’s probably a CSS thing. You may have set a height on the html (height:100% would be a static height) and you need to either just unset it or change it to min-height:100%, or you may want an overflow:scroll on the div.


#3

Hello @carina thanks for helping me out. I’m still very skeptical that the HTML component isn’t increasing its size when I populate my table, however overflow:scroll was an interesting alternative. Now there is a blank space between the scroll and the end of the page but it’s not a big deal for my project.

Thanks a lot.