I have a contentEditable article, with "EmbeddedSection" div's (recursive) which have a paragraph above and below them. In chrome, if the paragraph is empty, you can't actually get to it. In IE you can, but the size is all wrong.
http://jsfiddle.net/hE8zS/1/
<article contenteditable="true">
<p><span class="numbering">Title</span><span class="TextChunk"></span></p>
<div class="EmbeddedSection">
<p><span class="numbering">1</span><span class="TextChunk">Section Title</span></p>
<div class="EmbeddedSection">
<p><span class="numbering">1.1</span><span class="TextChunk">Embedded title</span></p>
<p><span class="TextChunk">Th</span><span class="TextChunk">e </span><span class="TextChunk">.</span></p>
</div>
<p><span class="TextChunk"></span></p> <!--Can't get to this element-->
<div class="EmbeddedSection">
<p class="Paragraph"><span class="numbering">1.2</span><span class="TextChunk">Another title</span></p>
<p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
</div>
<p><span class="TextChunk">Can get here, but not the one above 1.2 in chrome (ie gets there).</span></p>
<div class="EmbeddedSection">
<p class="Paragraph"><span class="numbering">1.3</span><span class="TextChunk">Another title</span></p>
<p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
</div>
<p><span class="TextChunk"></span></p> <!--Can't get to this element-->
</div>
</article>
Does anybody know if I'm able to style the empty paragraphs or somehow mark them as something which enables them to be reachable?
(Note: putting even a single whitespace character works, even after the user has edited and removed that whitespace character.)
You can add
:empty {
display: block;
height: 1em;
}
And it seems to work: http://jsfiddle.net/hE8zS/3/
This page contains information on browser compatibility: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With