scrollableDataTable inside modalPanel renders misaligned

[cprietom]

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.

[cprietom]

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

[adubovsky]

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]

[cprietom]

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.

[cprietom]

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.

[adubovsky]

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.

[cprietom]

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.

[adubovsky]

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.