When you place the editor inside a <div> tag with the CSS attribute overflow set to "auto", the menus in the editor don't behave properly. When the div has enough content inside it to scroll, menus for the Font, Size, and Format commands do not appear directly below the toolbar. Instead, they appear further below. The distance they are off varies based on how much the div has been scrolled.
This problem is happening in FF 3. It does not do this in IE.
It is easily recreated by surrounding an editor instance with a DIV like:
Is there a fix available for this? I have code that unfortunately is very dependent on being inside this DIV, so I can't remove the "overflow: auto" on it. I also can't change it to an IFRAME which would probably fix the editor problem but in the process introduce a lot more coding issues in my application.
This problem is happening in FF 3. It does not do this in IE.
It is easily recreated by surrounding an editor instance with a DIV like:
<div style="overflow: auto; height: 500px;"> <!-- put some code below here to cause the scrollbars to appear... --> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <!-- editor code here --> <!-- put some code below here to cause the scrollbars to appear... --> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/> </div>
Is there a fix available for this? I have code that unfortunately is very dependent on being inside this DIV, so I can't remove the "overflow: auto" on it. I also can't change it to an IFRAME which would probably fix the editor problem but in the process introduce a lot more coding issues in my application.