Question

I have a todo list that I display in a table element:

<table class="table table-condensed>
    <thead>
        <tr class="table_header">
            <th>Task Name</th>
        </tr>
    </thead>
    <tbody class="sortable">
        {% for action in actions %}
            <tr class="item_row" id = "action_{{ action.id }}">
                <td>{{ action }}</td>
            </tr>
            <tr class="detailed_row" id = "detail_{{ action.id }}">
                <td>{{ action.notes }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

I’m alternating between the action name and the action notes on each row of the table. When the page loads, I’m hiding all of the detailed_rows so that the user only sees the action names. If a user clicks on a name row, I show that action’s notes row (using a toggle).

$(document).ready(function() {
    $(".detailed_row").hide();  
}); 

$(function($) { 
    $(".item_row").click(function() {
        if( $(this).next().is(':hidden') ) {
            $(".detailed_row").hide();
            $(this).next().toggle('fast');
        } else {
            $(".detailed_row").hide();
        }
    }); 
});

I want the user to be able to sort the to do list by dragging the action name rows. I’m using jQuery’s Sortable:

$(".sortable").sortable().disableSelection();

Let’s disregard, for a moment, the movement of the action note rows. If the user either drags a note row, or puts a name row between another name and a note row, it will mess up the toggle logic. I’ve already accounted for this by moving the name row when the note row is moved and vice versa so that pairs are always in the right order.

The problem I have is with the size of the notes in the note row. If the notes are only a few lines, the sorting behavior behaves just fine. But if the notes are sufficiently long, the sorting doesn’t seem to work well, even though the notes are collapsed.

For instance, if I replace {{ action.notes }} with actual text, this works fine:

<table class="table table-condensed>
    <thead>
        <tr class="table_header">
            <th>Task Name</th>
        </tr>
    </thead>
    <tbody class="sortable">
        {% for action in actions %}
            <tr class="item_row" id = "action_{{ action.id }}">
                <td>{{ action }}</td>
            </tr>
            <tr class="detailed_row" id = "detail_{{ action.id }}">
                <td>Test text data</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

But this does not:

<table class="table table-condensed>
    <thead>
        <tr class="table_header">
            <th>Task Name</th>
        </tr>
    </thead>
    <tbody class="sortable">
        {% for action in actions %}
            <tr class="item_row" id = "action_{{ action.id }}">
                <td>{{ action }}</td>
            </tr>
            <tr class="detailed_row" id = "detail_{{ action.id }}">
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum imperdiet convallis. Nam ac nunc at magna pretium rhoncus eget ac neque. Nullam tempus feugiat euismod. Nunc posuere est consectetur nunc dignissim at faucibus mi convallis. Integer mattis nisi sit amet ante malesuada ut sagittis nulla congue. Pellentesque bibendum pulvinar mattis. Duis lorem libero, commodo hendrerit tincidunt quis, sodales eget nunc. Proin mauris mi, placerat quis pharetra eu, vestibulum vel mi. Vivamus luctus condimentum tortor ut accumsan. Fusce scelerisque, neque vel sollicitudin porta, ipsum lorem tempus mauris, et consequat nibh ipsum ut tortor. Aenean ut ante id justo pellentesque convallis. Etiam eu risus leo. Suspendisse potenti. Maecenas blandit, lectus sit amet suscipit viverra, enim velit bibendum nulla, sed aliquet arcu est quis justo. Sed sed est mi.
                    Morbi vel tortor iaculis sapien accumsan ullamcorper at id justo. Nulla facilisi. Nam adipiscing tellus a metus blandit quis vestibulum metus scelerisque. Nam risus tortor, pharetra vel condimentum lobortis, venenatis in tortor. Proin sit amet erat nulla, a dignissim lectus. Nullam dapibus ullamcorper justo, in imperdiet turpis egestas eget. Etiam dignissim faucibus ipsum. Nunc at diam risus, non rhoncus lectus. Praesent eget dolor vel ipsum blandit sagittis quis at ligula. Nunc euismod orci non felis scelerisque hendrerit. Quisque imperdiet lobortis erat, a tempus enim condimentum vitae. Proin rutrum ligula odio. Praesent nec magna lectus, quis congue augue. Nullam vestibulum tempus elit id sollicitudin. Nullam a nibh nisi, vitae tristique sem.
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

The movement of the action name row becomes janky, it doesn’t know where to place itself, other rows don’t displace correctly, etc.

How might I fix this behavior? I want the system to pretend that the action note rows are essentially nonexistent despite the fact that there may be a lot of text there.

Answer 1

I ended up putting the detail and item rows into the same row and then collapsing the detail section. That way I can drag around the table row and it won’t think it is the height of the entire detail section