CODEWITHSUNDEEP
jqueryhtmlcss
Coder
Coder

Reputation: 3130

Firefox does not allow blank contenteditable area

Firefox version 30.

Following code works perfectly in chrome and I can start typing in Paragraph.

But it does not work in firefox, any clues what is wrong

<div>
    <div>
      <span contenteditable="false">Not editable area</span>
        <p contenteditable="true"></p>
    </div>
</div>

JSFiddle - http://jsfiddle.net/THPmr/30/

Upvotes: 4

Views: 1466

Answers (2)

charlietfl
charlietfl

Reputation: 171700

CSS solution:

p[contenteditable] { min-height: 1em}
/* or more generic for any element*/
[contenteditable] { min-height: 1em}

DEMO

Upvotes: 2

Coder
Coder

Reputation: 3130

Chrome seems to automatically assign some height to the contenteditable paragraph but Firefox doesn't. Simple solution is to add min-height to the paragraph.

<p contenteditable="true" style="min-height:15px"></p>

Now we dont have to worry about extra spaces and unnecessary br tags

Upvotes: 8

Related Questions