7 Replies Latest reply on Feb 27, 2009 7:40 AM by Aleksandr Dubovsky

    scrollableDataTable inside modalPanel renders misaligned

    Carlos Prieto Newbie

      Hi,

      I'm using a scrollableDataTable inside a modalPanel and the column contents are shown misaligned with the header, while it renders aligned when it is outside the modalPanel. Here is the code:

      <rich:modalPanel id="panelDoc" width="600" resizeable="true">
       <f:facet name="header">
       <h:panelGroup>Doc</h:panelGroup>
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/img/break.gif" style="cursor: pointer;">
       <rich:componentControl for="panelDoc" operation="hide" event="onclick"/>
       </h:graphicImage>
       </h:panelGroup>
       </f:facet>
       <rich:scrollableDataTable id="scr" value="#{p7.fields}" var="field2">
       <rich:column>
       <f:facet name="header">FIELD2</f:facet>
       <h:outputText value="#{field2}" />
       </rich:column>
       </rich:scrollableDataTable>
       </rich:modalPanel>
      ...
      <a4j:form>
      ...
       <a4j:commandLink action="#{someAction.method()}" oncomplete="Richfaces.showModalPanel('panelDoc');" reRender="extDt,scr" />
      
       <rich:scrollableDataTable id="scr" value="#{p7.fields}" var="field1">
       <rich:column>
       <f:facet name="header">FIELD1</f:facet>
       <h:outputText value="#{field1}" />
       </rich:column>
       </rich:scrollableDataTable>
      ...
      </a4j:form>


      Does anyoune have any idea about how to render it properly when it is within a modalPanel? May it be a bug in the styles of the scrollableDataTable? I'm using Richfaces 3.3.0.GA.

      Thank you in advance.

        • 1. Re: scrollableDataTable inside modalPanel renders misaligned
          Carlos Prieto Newbie

          I forgot it: I experience this problem in IE7, in FF3 it renders OK, and I haven't tested it in other browsers.

          • 2. Re: scrollableDataTable inside modalPanel renders misaligned
            Aleksandr Dubovsky Newbie

            Hello,

            I could reproduce similar issue only under Opera 9.63 with following code (https://jira.jboss.org/jira/browse/RF-6442):

            <rich:modalPanel id="panelDoc" width="600" height="500"
             resizeable="true">
             <f:facet name="header">
             <h:panelGroup>Doc</h:panelGroup>
             </f:facet>
             <f:facet name="controls">
             <h:panelGroup>
             <h:graphicImage value="/images/add.gif" style="cursor: pointer;">
             <rich:componentControl for="panelDoc" operation="hide"
             event="onclick" />
             </h:graphicImage>
             </h:panelGroup>
             </f:facet>
             <rich:scrollableDataTable id="scr2" value="#{sdTable.value}"
             var="val2" width="300" height="400">
             <rich:column>
             <f:facet name="header">
             <h:outputText value="MAKE" />
             </f:facet>
             <h:outputText value="#{val2.make}" />
             </rich:column>
             <rich:column>
             <f:facet name="header">
             <h:outputText value="MODEL" />
             </f:facet>
             <h:outputText value="#{val2.model}" />
             </rich:column>
             <rich:column>
             <f:facet name="header">
             <h:outputText value="PRICE" />
             </f:facet>
             <h:outputText value="#{val2.price}" />
             </rich:column>
             </rich:scrollableDataTable>
             </rich:modalPanel>
             <a4j:form>
             <a4j:commandLink action="#{sdTable.method}"
             oncomplete="Richfaces.showModalPanel('panelDoc');"
             reRender="extDt,scr" value="show" />
            
             <rich:scrollableDataTable id="scr1" value="#{sdTable.value}"
             var="val1" width="300" height="400">
             <rich:column>
             <f:facet name="header">
             <h:outputText value="MAKE" />
             </f:facet>
             <h:outputText value="#{val1.make}" />
             </rich:column>
             <rich:column>
             <f:facet name="header">
             <h:outputText value="MODEL" />
             </f:facet>
             <h:outputText value="#{val1.model}" />
             </rich:column>
             <rich:column>
             <f:facet name="header">
             <h:outputText value="PRICE" />
             </f:facet>
             <h:outputText value="#{val1.price}" />
             </rich:column>
             </rich:scrollableDataTable>
             </a4j:form>

            Under IE6-7, Firefox 3.0 all is OK.
            Could you please provide more detailed info about your environment: jsf version, jsp/facelets etc.[/url]

            • 3. Re: scrollableDataTable inside modalPanel renders misaligned
              Carlos Prieto Newbie

              I'm using JSF 1.2 and Facelets 1.1.14, no JSP. Sorry but I've got no URL available. I'm deploying the application as an EAR in JBoss 4.2.2.GA and accessing the web page from a IE7.0.5730.13 in a Windows XP Professional Service Pack 2.

              I'll keep trying and let you know my progress.

              • 4. Re: scrollableDataTable inside modalPanel renders misaligned
                Carlos Prieto Newbie

                I found the root of the problem: I was applying a "text-align: center;" to the style of the , and that's what makes the scrollableDataTable look ugly.
                I don't know if that could be corrected in future versions of Richfaces for the style of the body not to affect the scrollableDataTable in such a way but, for now, I'll simply remove the text-align from the body style.

                Thanks for your time and help.

                • 5. Re: scrollableDataTable inside modalPanel renders misaligned
                  Aleksandr Dubovsky Newbie

                  I have tried to reproduce this strange behaviour in several browsers.
                  But could not to do it even when add style="text-align: center" to the body of the page provided in my previous post. I have tried it in jsp and in facelets projects with the same results.
                  Your could add your page and used styles in this topic or send sources directly on my email (see in profile) for our investigation.

                  • 6. Re: scrollableDataTable inside modalPanel renders misaligned
                    Carlos Prieto Newbie

                    This simple code shows both scrollableDataTables misaligned in IE7, but renders them fine in FF3:

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml"
                     xmlns:ui="http://java.sun.com/jsf/facelets"
                     xmlns:h="http://java.sun.com/jsf/html"
                     xmlns:f="http://java.sun.com/jsf/core"
                     xmlns:a4j="http://richfaces.org/a4j"
                     xmlns:rich="http://richfaces.org/rich">
                     <head>
                     <title>TITLE</title>
                     </head>
                    
                     <body style="text-align: center;">
                     <rich:modalPanel id="panelDoc" autosized="true">
                     <f:facet name="header">
                     <h:panelGroup>Doc</h:panelGroup>
                     </f:facet>
                     <f:facet name="controls">
                     <h:panelGroup>
                     <h:graphicImage value="/img/break.gif" style="cursor: pointer;">
                     <rich:componentControl for="panelDoc" operation="hide" event="onclick"/>
                     </h:graphicImage>
                     </h:panelGroup>
                     </f:facet>
                     <rich:scrollableDataTable id="scr" value="#{p7.fields}" var="field">
                     <rich:column>
                     <f:facet name="header">FIELD</f:facet>
                     #{field.label}
                     </rich:column>
                     </rich:scrollableDataTable>
                     </rich:modalPanel>
                    
                     <a4j:form>
                     <a4j:commandLink action="#{myAction.upload2()}" oncomplete="Richfaces.showModalPanel('panelDoc');" reRender="scr,scr2"
                     value="open panel" />
                    
                     <rich:scrollableDataTable id="scr2" value="#{p7.fields}" var="field">
                     <rich:column>
                     <f:facet name="header">FIELD</f:facet>
                     #{field.label}
                     </rich:column>
                     </rich:scrollableDataTable>
                     </a4j:form>
                     </body>
                    </html>


                    If I remove the style from the body, everything is rendered OK.

                    • 7. Re: scrollableDataTable inside modalPanel renders misaligned
                      Aleksandr Dubovsky Newbie

                      Okey, now I see the problem :) It reproduce on my environment even outside the modalPAnel with your code.

                      Issue in JIRA was opened: https://jira.jboss.org/jira/browse/RF-6447

                      Thank you for participation.