tinyMCE addon rendering/display bugs

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)

Is it a css issue or is it a vaadin issue?

what is the solution?



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.


I fixed this as follows:

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;

I can only guess as to why this worked.


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.