views:

283

answers:

2

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

A: 

Try to put to relative div (<div style="position:relative"/>) inside #helpDialog

Hope it helps. Alexey.

Alexey Ogarkov
Hi, I tried that but it gives the same result.Also tried tinyMCE config option `constrain_menus : true`
Guus
For the moment I can live with that.Maybe I will put a button in the dialog for the user that has permissions to edit the help text and then use `<rich:modalPanel>` to open a new window with the `<rich:editor>`.Because loading the editor is not that fast and most users only need to view the help text.
Guus
A: 

am using the rich components: rich:modalpanel with the rich:editor but when I call the component field of rich:editor is not editable, if someone can help.

                        <rich:editor id="Descrition" theme="advanced" value="#{MedicamentoBackingBean.medicamentoBean.nome}">
                            <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>

                    </rich:modalPanel>


                    <a4j:commandButton value="edit" onclick="Richfaces.showModalPanel('panel');"/>
Gustavo Stork