5 Replies Latest reply on Jan 27, 2009 12:38 PM by fabiocsilva

    Problems showing a modal panel

    fabiocsilva

      Houston, I have problems ! :)

      1- I'd like to show a scroll bar on modal panel. Is it possible ? Currently I'm using the 3.1.4.GA version of Richfaces.

      2- When click on a specific button of a grid, I need to show details of the selected row (DataModelSelection of JBoss Seam) , using a modal panel. But, when the button is clicked, the modal is showed without data. And, yes, the data was setted and the declaration is correct.

      3- Modal Panel and Internet explorer 6 does not match, definitely!!! The PC just crash when I open a modal over other.

      Please, help-me ! I'm confusing with this !!!!

        • 1. Re: Problems showing a modal panel

          1. In order to have a scroll inside the modal panel you need to set overflow:auto and concrete width and height to the body of the dialog. Pay attention: to the body, but to the dialog itself

          2. It is recommended to have one modal panel instance and show and update its content based on the clicked row. If you try to create one instance per one row, you might have a problem with performance soon.

          3. Houston needs to expect your personal shuttle. I.e. more info about your code is required.

          • 2. Re: Problems showing a modal panel
            nbelaevski

             

            "fabiocsilva" wrote:
            Houston, I have problems ! :) 2- When click on a specific button of a grid, I need to show details of the selected row (DataModelSelection of JBoss Seam) , using a modal panel. But, when the button is clicked, the modal is showed without data. And, yes, the data was setted and the declaration is correct.
            Hope this example will be helpful for you: http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable. Seam selection is not used there, though.

            • 3. Re: Problems showing a modal panel
              fabiocsilva

              Ok, lets go to the code.

              1 - I didn't understand

              Pay attention: to the body, but to the dialog itself
              .

              modal code:

              
               <rich:modalPanel styleClass="overflow:auto" id="modalPanel" width="#{empty width ? '450':width}" height="#{empty height ? '280':height}" left="#{empty left ? 'auto':left}"
               top="#{empty top ? 'auto':top}">
               <f:facet name="header">
               <h:panelGroup>
               <h:outputText value="#{modalTitle}"></h:outputText>
               </h:panelGroup>
               </f:facet>
               <f:facet name="controls">
               <h:panelGroup>
               <h:graphicImage value="../img/close.png" style="cursor:pointer" id="hidelink" />
               <rich:componentControl for="modalPanel" attachTo="hidelink" operation="hide" event="onclick" />
               </h:panelGroup>
               </f:facet>
               <div style="width:450px;height:280px" class="contentForm"><a4j:form ajaxSubmit="true" reRender="modalPanel">
               <s:div id="panel3">
               <s:validateAll>
               <s:div style="float:none;">
               <ui:insert name="modalFields" />
               </s:div>
               <br />
               <br />
               <br />
               <ui:insert name="modalButtons" />
               <br />
               <rich:messages globalOnly="true" styleClass="message" />
               </s:validateAll>
               </s:div>
               </a4j:form></div>
               </rich:modalPanel>
              



              2

              Button code:

               <rich:column width="6%" align="center">
               <f:facet name="header">Detail</f:facet>
               <h:commandButton immediate="true" value="#{empty newValue ? 'Detail' : newValue}" onclick="javascript:Richfaces.showModalPanel('myPanel');" id="link"
               action="#{myHome.myAction}" />
               </rich:column>
              


              Modal code

              similar to the other code

              3 - For instance. If I click on a "new button"(inside the modal):
              IE 6: The last field is showed readonly
              IE7: does not show the modal
              Firefox: works perfectly




              • 4. Re: Problems showing a modal panel
                ilya_shaikovsky

                1) rich-mpnl-body class as specified in our documentation.
                2) please explore the link which Nick gaves you because there are couple of questions regarding your code:
                *why you using ajaxified form and standard controls instead of just a4j: controls.
                *move the showing the 'myPanel' to oncomplete because you need the update the panel and then to show it.
                *reRender="modalPanel" from within the panel itself will close the panel and this is expected behavior.

                I suggest you to start with a simple things and then just to grow the functionality. Its difficult to work with the code without ensuring that it works fine from basic point.

                • 5. Re: Problems showing a modal panel
                  fabiocsilva

                  Thank you guys,
                  I looked the link and really works!
                  The only problem is the command

                  #{rich:component('myPanel').hide()}
                  , not recognized. I suppose there is relation with the version...