Vuejs - tr row not showing 100% when adding display block

Question

In my VuewJS application, I want to be able to click a row and show/hide the row below. However, when I do that I get a weird bug were the row below only fills one column width.

Here is my table structure:

NOTE: This table is generated dynamically.

The top row with 4 columns has an attribute of id and the long row that fills up 4 columns has a a data attribute data-body-id.

<tr v-bind:key="data.id" v-bind:id="index" v-on:click="rowClick(index)">
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td>Col 4</td>
</tr>
<tr v-bind:key="data.id" v-bind:data-body-id="index">
    <td colspan="4">Col 5 (This is a really long  4 colspan row ..............)</td>
</tr>

which computes as:

<tr data-v-1a25d82d="" id="0">
    <td data-v-1a25d82d="">Col 1</td>
    <td data-v-1a25d82d="">Col 2</td>
    <td data-v-1a25d82d="">Col 3</td>
    <td data-v-1a25d82d="">Col 4</td>
</tr>
<tr data-v-1a25d82d="" data-body-id="0">
    <td data-v-1a25d82d="" colspan="4">Col 5 (This is a really long  4 colspan row ..............)</td>
</tr>

in my rowClick(index) method I have:

methods: {
  rowClick(id) {
    var dataId = "data-body-id='" + id + "'";
    var row = document.querySelector('[' + dataId + ']');
    row.style.display = 'block';
}
}

When I click a row, the row below is visible but it shows like so:

If I use the developer inspector and find the attribute and uncheck the display: none; that is set in the CSS initially to hide the row it shows perfectly.

What is going on and how do I fix it?

Could you add a JSFiddle/Codepen or just insert a code snippet into your question? It might help... — Rojo
– Rojo, Commented Sep 16, 2019 at 20:52

MarkP · Accepted Answer · 2019-09-16 20:53:29Z

1

When trying to show dynamic table rows that are hidden please use:

display: 'table-row',

so in your case:

row.style.display = 'table-row';

answered Sep 16, 2019 at 20:53

MarkP

2,5665 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JamesG Over a year ago

I didn't even know this was a thing (im a noob). thank you.

Collectives™ on Stack Overflow

Vuejs - tr row not showing 100% when adding display block

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related