9

Consider the following: (Live Demo)

HTML:

<div contenteditable></div>

CSS:

div {
  text-align: right;
}

When you click the div in Firefox, the cursor is located at the left (looks like text-align: right; has no effect). But, if you start typing, text-align: right; starts taking effect.

Why is that? Any ideas how to fix this?

Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
  • That cant be chagned, the cursor always starts on the left – ErikMes Jun 07 '13 at 12:37
  • @Doorknob, Which Firefox version do you use? – Misha Moroshko Jun 07 '13 at 12:38
  • A long shot, but try adding `="true"` at the end to `contenteditable`. The example in the Firefox docs uses that syntax. – Mohamad Jun 07 '13 at 12:39
  • @Doorknob, It doesn't work for me in Firefox 21.0. – Misha Moroshko Jun 07 '13 at 12:41
  • I have v20.0 and I see the same problem. – Mr Lister Jun 07 '13 at 12:43
  • Just installed the latest (v21.0) and the problem is still here. By the way, with how jsbin works, it seems to remember that you typed something in the div, so once you have (and the cursor was to the right), it will still be to the right after you change the HTML and click again. However, if you _don't_ type anything into the div, you will see that adding `="true"` doesn't help. – Mr Lister Jun 07 '13 at 12:59
  • Looks like a bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1103011 – 4esn0k Mar 28 '20 at 11:18

1 Answers1

6

This can be achieved using a simple change like this:

<div contenteditable>&nbsp;</div>

We're forcing a blank space in it.

Well if the space matters, I think you have a problem. But I hope this helps :)

itsols
  • 5,406
  • 7
  • 51
  • 95