StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I managed to find a slightly ugly workaround that fixes it <em>(note: might as well skip to the bottom....I came up with a better solution)</em>. Inside the expand_container element, I added another div, that contains the other elements. In the expand and contract functions, I remove that element from its parent (the expand_container), size the expand_container, and then add that div back. The issue no longer happens. </p> <pre><code><div id="expand_container" > <div id="inner_container" style="margin:0; padding:0">  <div class="data_row background"> <div class="column_allow_overflow background"> ... </code></pre> <p>then...</p> <pre><code>var expand = function (e) { var button = document.getElementById('expand_button'); var expand_container = document.getElementById('expand_container'); var inner_container = document.getElementById('inner_container'); // new expand_container.removeChild(inner_container); // new button.onclick = contract; expand_container.style.height = '160px'; expand_container.appendChild(inner_container); // new button.innerHTML = "Contract"; }; </code></pre> <p>etc...</p> <p>Edit:</p> <p>FYI, if you don't want to change your dom structure by adding that inner element, instead you can yank all the children of expand_container, then add them all back after sizing it. For instance:</p> <pre><code>var len = expand_container.childNodes.length, i, a = []; for (i=len-1; i>=0; i--) a.push(expand_container.removeChild( expand_container.childNodes.item(i))); button.onclick = contract; expand_container.style.height = '160px'; for (i=len-1; i>=0; i--) expand_container.appendChild(a[i]); </code></pre> <p>Possibly slow if you've got a zillion elements, but on your example it works like a charm.</p> <p>Edit 2: ok, just thought of something that works even better....remove expand_container and add it back in the same place. Again, works fine (even if nextSibling is null):</p> <pre><code>var next = expand_container.nextSibling; var parent = expand_container.parentNode; parent.removeChild(expand_container); button.onclick = contract; expand_container.style.height = '160px'; parent.insertBefore (expand_container, next); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload