TinyMce with Facebox

I am having some problem using tinymce on a textbox inside a Facebox modal popup. I am trying to go something like the following-

• There is a parent page in which I am loading the tinymce.min.js javascript file and also doing tinyMCE.init().
• There is a button on the parent page and on the click of the button, I have a javascript function being invoked makes an ajax call and displays the return html from the ajax call in a facebox.
• There is a textbox in the return HTML from the ajax call which I need to be tinyMCEd.
• I have a registered event handler which has binded to the event afterReveal.facebox - which from the documentation looks like is called after the facebox has been rendered (though the doc isn't very clear)

• In the above event handler, I have the following code -

  tinyMCE.execCommand('mceAddControl', true, 'new-outline')

new-outline is the id of the textarea which needs to be tinyMCEd.

I am not getting any JS errors and the textarea turns to be tinymce editor. However, the editor jumps out the facebox (to the right) and only a portion of the editor is visible.

If I do not make it tiny mce, then the textarea is rendered properly inside the facebox.

How can I correct this?

I was facing the problem because of some styling issues in my CSS. The method which I've described is the best way to achieve this if you want to do something like this.