Databases
StackOverflow2013
Postsdbo
PODifference in display of inline elements when toggled programmatically and declared inline on WebKit
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifference in display of inline elements when toggled programmatically and declared inline on WebKit
    text
    copied!<p><strong><a href="http://jsfiddle.net/YumVZ/" rel="nofollow">jsFiddle reproduction</a></strong></p> <p>I’ve got some <code>div</code> elements that are nested beneath a <code>span</code>. I need the inline behavior of the outer elements and the block behavior of the inner. I can declare a class on the <code>.outer</code> span parent that sets the display of <code>.inner</code> as <code>none</code>. If I declare this in the HTML itself all of the spans collapse as expected into a single line. However, if I toggle the <code>.collapse</code> style with JavaScript (jQuery <code>.toggleClass</code>, in this case). I still get a mysterious line break, i.e. even if the container for the block-level elements is not displayed, the browser doesn't reclaim the vertical space.</p> <p>This only happens in WebKit (Chrome and Safari). Firefox behaves as I’d expect. I haven’t bothered to try this in IE. </p> <p>An explanation and/or a work-around would be much appreciated.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Spans&lt;/title&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;//&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(evt) { $(".toggle").click(function(evt) { $(this).closest(".outer").toggleClass("collapsed"); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; body { font-family: Helvetica; } span { padding: 0 0.5em; margin-right: 0.5em; outline: solid 1px #ccc; } .outer.collapsed .inner { display: none; } .outer.collapsed .open:after { content: "…"; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;&lt;code&gt;.outer.collapsed&lt;/code&gt; toggled by jQuery&lt;/h2&gt; &lt;div&gt;&lt;span&gt;The following should display inline when collapsed: &lt;/span&gt; &lt;span class="outer"&gt; &lt;button class="toggle"&gt;Toggle&lt;/button&gt; &lt;span class="open"&gt;[&lt;/span&gt; &lt;div class="inner"&gt; &lt;div&gt;A&lt;/div&gt; &lt;div&gt;B&lt;/div&gt; &lt;div&gt;C&lt;/div&gt; &lt;/div&gt; &lt;span class="close"&gt;]&lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;h2&gt;&lt;code&gt;.outer.collapsed&lt;/code&gt; Declared inline&lt;/h2&gt; &lt;div&gt;&lt;span&gt;The following should display inline when collapsed: &lt;/span&gt; &lt;span class="outer collapsed"&gt; &lt;button class="toggle"&gt;Toggle&lt;/button&gt; &lt;span class="open"&gt;[&lt;/span&gt; &lt;div class="inner"&gt; &lt;div&gt;A&lt;/div&gt; &lt;div&gt;B&lt;/div&gt; &lt;div&gt;C&lt;/div&gt; &lt;/div&gt; &lt;span class="close"&gt;]&lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </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