Problems with <rich:inplaceInput>

[dankatz316]

I'm a relative novice with RichFaces.

I'm attempting to implement a proper rich:inplaceInput setup. I'm running into some issues, however. Namely, I have a text area for a string which can be up to 250 characters. Whenever I enter "Edit" mode, the end of the value tails off the right side of the edit box which is quite unsightly and unprofessional. Can somebody supply me with a sample <rich:inplaceInput> tag and CSS implementation that can solve my problem? I have tried many combinations of attributes...I'm quite frustrated. An entire XHTML file probably isn't necessary, a simple <rich:inplaceInput ...></rich:inplaceInput> would more than suffice.

Thanks in advance.

---Dan

[dankatz316]

To clarify, the implementation should be able to confine both the view and edit modes to an equivalent amount of space, contain large bodies of text, and neither component should render while the other is active. Thanks again.

[ilya_shaikovsky]

could you please make screenshot of the problem?

[ammaletu]

I'm not the original poster, but I think I know what they meant: I have a text in a table row which I would like to be able to edit. The text has no restriction on its length and can certainly be longer than the width of the row.

http://img196.imageshack.us/img196/3117/12480372.jpg
(I hope this works!)

In default mode, rich:inplaceInput does not wrap to the next line. For a long text, the user can only see the beginning. When you click on it and go to edit mode, you can navigate to the end of the text, but you can't see the controls because they are beyond the border of the table cell. You can see this in the second part of the screenshot.

It's possible to overwrite the white-space CSS styling of the view mode so that the text wraps normally and is displayed on several rows:

.rich-inplace-view {
 background: transparent;
 white-space: normal;
}

But then, the normal view text is obviously not hidden when the input field is shown. The input field is displayed above the text, but you can still see the other rows below it. That really doesn't look good, and from the way the markup is constructed I'm not sure what I could do about it with just CSS.

Sometimes by the way upon saving the changed text, the table row is contracted to only show the first row (third part of screenshot). If you click on it, you get the former view again. Very confusing.

My inplaceInput is defined as follows:

<rich:inplaceInput showControls="true"
 editEvent="onclick"
 selectOnEdit="true"
 value="#{dataTableItem.description}"
 editClass="tableRowInplaceEdit"/>

So, is there a tutorial that shows how to use this component with longer texts? I like this component and it is very useful for the user, but as it is it seems it really can't handle anything larger than a single word or two.