RichTextEditor text wrap on resize

[slick07]

By looking at the RichTextEditor sample available at https://smartclient.com/smartgwt/sho...trols_richedit when it is resized the text is just cut. Is it possible to have it wrap as the canvas below it does? Actually it does wrap the text to some extent but it is not clear based on what criteria...

[Isomorphic]

Apologies for the delay - we may modify the sample/the framework with these defaults, but you can get the behavior you expect by not clipping the editor itself, as our sample does, and instead clipping the toolbar across the top.

You can do that by applying overflow:"hidden", along with width:"100%" and a suitable height, to the child toolbar via setAutoChildProperties().

Something like this replacement code for the sample you linked to:

    //richTextEditor.setOverflow(Overflow.HIDDEN); // don't clip the editor itself at draw-width, because that prevents resize/reflow
    Toolbar toolbar = new Toolbar();
    // instead, clip the toolbar - otherwise, it will extend off to the right and cause a scrollbar
    toolbar.setWidth100();
    toolbar.setHeight(34);  // big enough for the Flat skins in Spacious density
    toolbar.setOverflow(Overflow.HIDDEN);   // clip the toolbar to prevent it overflowing to the right and showing an h-scrollbar
    richTextEditor.setAutoChildProperties("toolbar", toolbar);

[slick07]

The toolbar workaround works fine but the actual text area still does not wrap. When resizing the RichTextEditor the new dimensions (the width more exactly) are not sent to the actual text area to resize accordingly and to force the wrap of text. I played with various overflow values but I was not able to make it wrap. But if I use inspect html within the browser and I edit the width of the iFrame that renders the text, then the component wraps the text.

[Isomorphic]

Ah, ok, we see that problem and it's been fixed for tomorrow's builds, dated August 5 or later.

Note that, while this will work for you locally tomorrow, you may still see a misbehavior in the Showcase, wherein wrapping will work as expected but you may not see a v-scrollbar as expected.

This doesn't happen outside of our showcase ExampleViewer, so we'll look into it separately and get back to you.

[slick07]

Just had the chance to test it and it is almost correct. If I add a RichTextEditor in a dynamic form with width and height set to "*" such that to take the entire available area, a vertical scrollbar appears all the time, even for empty text. See screenshot attached.

And if the height of the form is increased and then decreased by dragging a horizontal split bar then the height of the area remains large and the scroll bar is increased. It is recomputed only after the width is resized. Hence it seems to be the same re-computation problem for the height as it was above for the width...

[Isomorphic]

Can you show the code for that tab pane?

[slick07]

notesRichTextItem = new RichTextItem();
notesRichTextItem.setName(TaskDataSource.NOTES_FIELD);
notesRichTextItem.setWidth("*");
notesRichTextItem.setHeight("*");
notesRichTextItem.setDisabled(true);

taskNotesDynamicForm.setDataSource(TaskDataSource.getInstance());
taskNotesDynamicForm.setWidth100();
taskNotesDynamicForm.setHeight100();
taskNotesDynamicForm.setFields(notesRichTextItem);
taskNotesDynamicForm.setImplicitSave(true);
taskNotesDynamicForm.setImplicitSaveDelay(3000);
taskNotesDynamicForm.setImplicitSaveOnBlur(false);

I could try to extract a test case if the above code is not enough.

[Isomorphic]

No, that's fine - we'll take a look and get back to you.