I attach a screenshot just to make my problem clear
So basically what I have here is a tinyMCE editor in a popup/sub window
My problem is that the bottom border of the editor is always disapeared no matter what initial height I set for the editor
But if I resize the window, and I resize it big enough then sudently the bottom border will show up (1 2 pictures)
If I set the editor to setsizefull (ie 100% width and 100% height) then the whole editable area disapears
but if I set the width for example 100% and I set the height in px than that is ok
the editor width is set to 100% but when I resize the window and I make it wider than the original the editor doesn’t resize itself to the window (2. picture)
It seems as a browser independent issue ( firefox 3.6, latest chrome , safari4, latest opera)
I investigated a bit and to me it looks like a tinymce bug. TinyMCE renders it too high. I didn’t check if this happens outside Vaadin or is there some css conflict with Vaadin and tinymce styles. An option would be to use two DIV elements for TinyMCE and reserve the space for the excess space, but that would cause issues with different TinyMCE versions.
As a workaround you could try to wrap TinyMCE editor in a CssLayout which is bit higher than the wrapped editor (e.g. ~ 200px for 180px height editor). This way the overflown part (hidden in you screenshots) would be visible.
TinyMCETextField mceText = new TinyMCETextField();
mceText.setConfig("{height: '100%'}");
These two lines would typically be used inside a FieldFactory like this:
public class FieldFactory extends DefaultFieldFactory
{
if (propertyId.equals("whatever"))
{
TinyMCETextField mceTExt = new TinyMCETextField();
mceTExt.setConfig("{height: '100%'}");
return mceTExt;
}
}
That is cool. Have you seen any side-effects? If not, I can commit that configuration to be the default. I’m not that interested to dig in why it actually works - very good thing if it does.
