I use a <rich:editor> inside a JQuery
UI dialog:
<div id="helpDialog" style="display: none" title="#{messages.help}">
<rich:editor id="helpTextArea" theme="advanced" value="#{helpUtils.test(helpId)}">
<f:param name="theme_advanced_buttons1" value="bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,forecolor,backcolor"/>
<f:param name="theme_advanced_buttons2" value=""/>
<f:param name="theme_advanced_buttons3" value=""/>
<f:param name="theme_advanced_toolbar_location" value="top"/>
<f:param name="width" value="90%"/>
<f:param name="theme_advanced_toolbar_align" value="left"/>
</rich:editor>
<p>
<button id="editHelpButton">#{messages.edit}</button>
<button id="saveHelpButton">#{messages.save}</button>
</p>
</div>
When I click on "font family" or "font size" the dropdown box is shown in the upper left corner of the screen and not inside the dialog. (see screenshot)
How can I fix this?
screenshot
