javascripthtmlajaxprototypejsinplace-editing

Can't edit after erasing all the text in Prototype's inPlaceEditor

All the examples of Prototype's inPlaceEditor I've found suffer from the same problem. When you enter edit mode and erase all the text and click OK you can't edit any more because the <p> tag is empty and there is nothing to click on! Here is an example too: http://24ways.org/examples/edit-in-place-with-ajax/ So how do you make in-place edit of an empty field, like an empty <td>?

Solution

  • It's very simple, just add these lines to your CSS code:

    p.editable {
    min-height: 10px;
}

    You can add a border, too, but that isn't required.