Search code examples
richfacesautosizepopuppanel

Richfaces popup panel does not get autosized when its content is dynamically updated


I have a rich popupPanel with two selectOneMenus which render some more components inside the popup when used. The main problem is that the popup Panel does not get autosized when the components are rendered. The problem appeared when I updated to richfaces 4.3.7, but this version solves another problem that I had, so I don't want to get back to a previous version.

<rich:popupPanel id="editAccessPopup" modal="true" autosized="true" domElementAttachment="parent">
            <f:facet name="controls">
                <h:outputLink value="#"
                    onclick="#{rich:component('editAccessPopup')}.hide(); return false;">   X   </h:outputLink>
            </f:facet>
            <h:form id="edit_access_popup_form">
                <a4j:outputPanel id="outputPanel" layout="block">
                    <legend style="font-weight: bold;">Edit Access</legend>
                    <rich:panel>
                        <h:panelGrid columns="2" style="width:100%"
                            columnClasses="panelgrid_label_column, panelgrid_input_column">
                            <h:outputLabel style="font-weight: bold; align:left;"
                                value="Type"
                                for="edit_access_access_type_menu" />
                            <h:selectOneMenu id="edit_access_access_type_menu"
                                value="#{serviceDesignBean.accessTypeSelectData.selectedIndex}"
                                valueChangeListener="#{serviceDesignBean.valueChangedForAccessType}" >
                                <f:selectItem itemValue=""
                                    itemLabel="#{lbl.default_selectitem_value}" />
                                <f:selectItems
                                    value="#{serviceDesignBean.accessTypeSelectData.list}"
                                    var="accessType" itemValue="#{accessType.value}"
                                    itemLabel="#{accessType.label}" />
                                <a4j:ajax event="valueChange"
                                    render="service_id_panel, edit_access_popup_form"
                                    execute="@this" />
                            </h:selectOneMenu>

                            <h:outputLabel style="font-weight: bold; align:left;"
                                value="#{lbl.edit_access_popup_service_action}"
                                for="edit_access_service_action_menu" />
                            <h:selectOneMenu id="edit_access_service_action_menu"
                                value="#{serviceDesignBean.accessActionSelectData.selectedIndex}"
                                valueChangeListener="#{serviceDesignBean.valueChangedForAccessAction}">
                                <f:selectItem itemValue=""
                                    itemLabel="#{lbl.default_selectitem_value}" />
                                <f:selectItems
                                    value="#{serviceDesignBean.accessActionSelectData.list}"
                                    var="accessAction" itemValue="#{accessAction.value}"
                                    itemLabel="#{accessAction.label}" />
                                <a4j:ajax event="valueChange"
                                    render="service_id_panel, edit_access_popup_form"
                                    execute="@this" />
                            </h:selectOneMenu>

                            <h:outputLabel value="Service Id" for="input_service_id"
                                style="font-weight: bold; align:left;" />
                            <a4j:outputPanel id="service_id_panel" layout="block">
                                <h:inputText id="input_service_id"
                                    value="#{serviceDesignBean.inputServiceId}"
                                    disabled="#{not serviceDesignBean.serviceIdFlag}" />
                            </a4j:outputPanel>

                        </h:panelGrid>
                    </rich:panel>
                </a4j:outputPanel>

                <h:panelGroup id="access_attr_panel"
                    style="margin-left:20px;margin-top:20px;"
                    rendered="#{not empty serviceDesignBean.accessActionSelectData.selectedIndex and not empty serviceDesignBean.accessTypeSelectData.selectedIndex}">
                    <fieldset>
                        <legend>#{lbl.sol_manag_service_Attributes}</legend>
                        <h:panelGrid style="margin-left:20px;" class="gridStyle"
                            columnClasses="panelgrid_label_column,panelgrid_imput_column"
                            columns="2">
                            <h:outputText value="#{lbl.ServiceAttributeName_SPEED}"
                                rendered="#{serviceDesignBean.serviceAttrVisibility.visibilityToSpeed}" />
                            <a4j:outputPanel layout="block"
                                rendered="#{serviceDesignBean.serviceAttrVisibility.visibilityToSpeed}">
                                <h:selectOneMenu
                                    disabled="#{not serviceDesignBean.serviceAttrVisibility.editableSpeed}"
                                    value="#{serviceDesignBean.selectedSpeed}">
                                    <f:selectItem itemValue=""
                                        itemLabel="#{lbl.default_selectitem_value}" />
                                    <f:selectItems value="#{serviceDesignBean.accessSpeedList}"
                                        var="speed" itemValue="#{speed.speedValue}"
                                        itemLabel="#{speed.speedValue}" />
                                    <a4j:ajax event="valueChange" execute="@this" />
                                </h:selectOneMenu>
                            </a4j:outputPanel>

...more components to get rendered...

            <a4j:commandButton id="save_access_btn"
                    value="#{lbl.service_design_save_edited_access}"
                    onclick="#{rich:component('editAccessPopup')}.hide()"
                    actionListener="#{serviceDesignBean.saveEditedAccess}"
                    render=":pending_services, :accesses_form"
                    oncomplete="javascript:location.reload(true)"></a4j:commandButton>

            </h:form>
        </rich:popupPanel>

I have found here: https://developer.jboss.org/thread/241593 that I can use this panel.doResizeOrMove(RichFaces.ui.PopupPanel.Sizer.Diff.EMPTY); to force the popup to resize. I have two questions:

  1. Can you tell me how to resize the popup with the above function?
  2. Is there another way to fix my problem?

Thank you in advance!


Solution

  • You just call the method, same way you're doing it for closing the panel:

    #{rich:component('editAccessPopup')}.doResizeOrMove(RichFaces.ui.PopupPanel.Sizer.Diff.EMPTY);
    

    As for other options you can rerender the whole panel. Add oncomplete="#{rich:component('editAccessPopup')}.show(); to the commandbutton to show the panel again.