Collapse Mode

Hi,

thanks for your question, and sorry for the trouble.

This might be caused by the “Loans” table. In the last rows, you are using the #colspan# keyword to merge cells. Unfortunately, the DataTables JS library does not support such combined cells. This therefore raises a JavaScript error, which stops the execution on all tables.
Could you therefore please try to either remove all #colspan# from the tables on the page, or remove the Shortcode parameter for this table, as well as uncheck the “Use DataTables” checkbox?

Regards,
Tobias

Thank you for assisting. I removed the colspan and I had already unchecked the “Use DataTable”. It still doesn’t seem to be working for me. The table just pops out of the toggle and goes off the page.

Hi,

thanks for that. Another reason could be that the tables are shown in those expanding containers. Due to how these work technically, the JavaScript code can not run when the table is made visible after expanding the container.
Could you therefore test this again with a table that is not in such a container?

Regards,
Tobias

The table worked once I removed it for the toggle. Is there a work around that I could try to kind them in the toggles? Thanks

Hi,

ok, that confirms my assumption. Unfortunately, I’m not aware of a solution to use these features on a table that is inside a toggle ?? The problem simply is how those toggles work (they first remove and then later add the content to the so-called DOM in the browser, but by doing that, they prevent that the necessary JavaScript functions can be called).

Sorry that I can not offer a solution here.

Regards,
Tobias

No problem. Thanks for your help

Hi,

sure, you are very welcome!

Best wishes,
Tobias

Just in case some one else was looking for another solution. I used TablePress and added the following code.

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}

<script>
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");

for (var i = 0; i < headers.length; i++) {
	headertext[i]=[];
	for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
	  var current = headrow;
	  headertext[i].push(current.textContent);
	  }
} 

for (var h = 0, tbody; tbody = tablebody[h]; h++) {
	for (var i = 0, row; row = tbody.rows[i]; i++) {
	  for (var j = 0, col; col = row.cells[j]; j++) {
	    col.setAttribute("data-th", headertext[h][j]);
	  } 
	}
}
</script>

Hi,

thanks for sharing that! The idea to use JavaScript code to add those data-th attributes to the header cells is quite clever!

Best wishes,
Tobias

Thanks, but I can’t take credit for it, I found it in a forum. Thought it was a good option or future extension idea for TablePress. ??

Hi,

yes, I should probably add it to the Extension. I’ll definitely keep this in mind!

Best wishes,
Tobias