Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't get to empty paragraphs in contentEditable

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.)

like image 657
gremwell Avatar asked Dec 27 '22 00:12

gremwell


1 Answers

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

like image 77
kalley Avatar answered Jan 05 '23 06:01

kalley