Show() and hidden table rows

Question

I have a table with some hidden rows and a clickable button that reveals those hidden rows. The problem is that, when I use the link, the rows get revealed but the body doesn't update its height. (But it does update when I open the chrome console and close it)

css:

table tr.hide-row {
   display:none;
}

jquery:

$(document).on('click', 'a.openallrows', function(e) {
    $('.hide-row').show();
    e.preventDefault();
});

html

<table>
    <tbody>
        <tr>
            <td colspan="4">visible</td>
        </tr>
        <tr class="hide-row">
            <td>This is hidden</td>
            <td>-</td>
            <td>--</td>
            <td>---</td>
        </tr>
    </tbody>
</table>

I have a lot of hidden rows. And when they all get shown, they overlap the page footer and that's not what I was going for..

Update!

<div class="grid" style="width: 272.5px; left: 0px; top: 10px; position: absolute;">
     table is inside here  
</div>

The table is inside a grid which has position absolute! The position is automatically added by BlocksIt.js

Can you post a complete code example that replicates the issue? What you've posted isn't sufficient. — j08691, Feb 10 '14 at 17:41
Did you try [this](http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes)? — Adriano Repetti, Feb 10 '14 at 17:42
Are those tables absolutely positioned, or floated? Or may be their parents are? — Dimitri, Feb 10 '14 at 17:43
@Dimitri You are right. The parent div is absolutely positioned. I updated my first post. — Kristjan Kirpu, Feb 10 '14 at 17:52
@Kristjan Kirpu - is there a reason why is it absolutely positioned? From the screen capture it looks that the div is just a layout row. And if so, it can be relatively positioned. — Dimitri, Feb 10 '14 at 17:55
@Dimitri I'm using Blocksit.js for the boxes that include the tables. The absolute positioning is automatically added. — Kristjan Kirpu, Feb 10 '14 at 18:10

score 0 · Answer 1 · answered Feb 10 '14 at 17:51

0

try this css code

table{
height:auto !important;
}

answered Feb 10 '14 at 17:51

The Fire TITAN

124
6

1

The table is still overlapping the footer. – Kristjan Kirpu Feb 10 '14 at 18:13
add body{ height:auto !important; } – The Fire TITAN Feb 11 '14 at 08:06

score 0 · Answer 2 · answered Feb 10 '14 at 17:57

0

What happens if you change the containing div as such:

<div class="grid" style="width: 272.5px;margin-top:10px;">
     table is inside here  
</div>

answered Feb 10 '14 at 17:57

Dimitri

6,923
4
35
49

BlocksIt.js will re-position the selected elements using CSS absolute position property. It has the capability to calculate the top and left positions for an element based on certain criteria, like below: Start the new block from left to right, and Place the new block under shortest block. – Kristjan Kirpu Feb 10 '14 at 18:11
@Kristjan Kirpu - I suggest you mention Blockslt.js somewhere in the question to prevent further confusion. As far as your question goes, unfortunately I'm not familiar with the above mentioned library, but most likely it fails to reevaluade div's height. Could be due to an error. Have you examined the console to see if any JS errors are thrown? – Dimitri Feb 10 '14 at 18:14
No JS errors are thrown. I found some other BlocksIt.js scripts that fix some errors. I'll try them out and I'll update my status asap. – Kristjan Kirpu Feb 10 '14 at 18:17

score 0 · Answer 3 · answered Feb 10 '14 at 18:35

Ive got a cool idea.

You could easily just put a container around it with a height and width of 100% and then grab its height and the height of the parent element to boxes.

Everytime a new box is opened, compare it to the height of the container, and add to the container's height if the margin between the two becomes to small.

Ive made a fiddle. I used an increment code on the height. Imagine the red box is your "hide-row" class. In this situation(because Im pressed for time,) I have pretended to add on 40px(which will represent the height of a td.) Everytime it increases, the container increases IF the maximum margin would be exceeded in the following add. So I incremented the height of the container. I recommend your container contain the entire page.

$(".higher").click(function(){
    var allheight = $(".all").height() - 80;
    var red = $(".higher").height();
    $(".higher").css("height", "+=40px");
    if(red > allheight){
        $(".all").css("height", "+=40px");
    }
});

Click Here to see it.

You could place as many block columns in this section as needed.

score 0 · Answer 4 · answered Feb 10 '14 at 21:40

The block was overlapping the footer because it didn't update its height value. Luckily I was able to find a different script that lays out the blocks. It has a function to call a refresh to itself so it doesn't overlap other elements.

If someone ever has a similar problem I suggest you try out https://github.com/GBKS/Wookmark-jQuery it has all the same functions as BlocksIt.js and even more.

This was the function that I found very necessary for my project that Wookmark has $('.grid').trigger('refreshWookmark'); it refreshes the block.

Show() and hidden table rows

4 Answers4