9 Replies Latest reply on Nov 21, 2008 9:02 AM by ilya_shaikovsky

    Display problem with IE and rich:panel

    mfahandezh

      Hi,
      I have a page with some rich:panels and h:panelgrid as you see in source below.

      <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j">
      
       <!-- ++++++++++++++++++++++++++ Table ++++++++++++++++++++++++ -->
       <a4j:form id="dialogListForm">
       <!-- +++++++++++++++++++++ Toolbar ++++++++++++++++++++++++ -->
       <a4j:outputPanel layout="block">
      
       <h:panelGrid columns="2" columnClasses="top">
       <rich:panel>
       <rich:toolBar itemSeparator="grid">
       <h:outputText value="Liste" />
       <s:button image="../../img/add_article.png" action="#{institutionController.newInstance}" />
       </rich:toolBar>
      
       <!-- Table of Dailogs -->
       <a4j:outputPanel layout="block" ajaxRendered="true" id="dialogTable">
       <div class="results"><h:outputText value="The application search returned no results."
       rendered="#{empty institutionController.list}" /> <rich:dataTable id="dialogList" var="institution"
       value="#{institutionController.list}" rendered="#{not empty institutionController.list}">
       <rich:column sortBy="#{institution.name}" filterBy="#{institution.name}" filterEvent="onkeyup">
       <f:facet name="header">
       <h:outputText value="Name" />
       </f:facet>
       <a4j:commandLink value="#{institution.name}" action="#{institutionController.createInstance}"
       ajaxSingle="true">
       <a4j:actionparam name="institutionId" value="#{institution.id}" />
       </a4j:commandLink>
       </rich:column>
       <rich:column sortBy="#{institution.customer.name}" filterBy="#{institution.customer.name}"
       filterEvent="onkeyup">
       <f:facet name="header">
       <h:outputText value="Kunde" />
       </f:facet>
       <h:outputText value="#{institution.customer.name}" />
       </rich:column>
       </rich:dataTable></div>
       </a4j:outputPanel>
       </rich:panel>
      
       <a4j:outputPanel layout="block" ajaxRendered="true" id="dialogDetail">
       <!-- ++++++++++++++++++++++++++++++ Detail ++++++++++++++++++++++ -->
       <rich:panel>
      
       <rich:toolBar itemSeparator="grid">
       <h:outputText value="Detail" />
       <a4j:commandButton id="save" value="Save" actionListener="#{institutionController.insert}"
       rendered="#{!institutionController.managed}" image="../../img/add.png"
       reRender="dialogTable, dialogDetail" />
       <a4j:commandButton id="update" value="Save" action="#{institutionController.update}"
       rendered="#{institutionController.managed}" image="../../img/add.png"
       reRender="dialogTable, dialogDetail" />
       <a4j:commandButton id="delete" value="Delete" action="#{institutionController.delete}" immediate="true"
       rendered="#{institutionController.managed}" image="../../img/delete.png"
       reRender="dialogTable, dialogDetail" ajaxSingle="true" />
       </rich:toolBar>
       <s:decorate id="customerDecoration" template="../../layout/edit.xhtml">
       <ui:define name="label">Kunde</ui:define>
       <h:selectOneMenu id="customerSelect" value="#{institutionController.instance.customer}"
       required="true" disabled="#{institutionController.managed}">
       <s:selectItems value="#{customerList.resultList}" var="h" label="#{h.name}" itemValue="#{h}"
       noSelectionLabel="Bitte auswählen..." hideNoSelectionLabel="true" />
       <s:convertEntity />
       </h:selectOneMenu>
       </s:decorate>
       <s:decorate id="nameDecoration" template="../../layout/edit.xhtml">
       <ui:define name="label">Name</ui:define>
       <h:inputText id="name" required="true" size="30" maxlength="30"
       value="#{institutionController.instance.name}">
       <a4j:support event="onblur" reRender="nameDecoration" bypassUpdates="true" ajaxSingle="true" />
       </h:inputText>
       </s:decorate>
       <s:decorate id="descriptionDecoration" template="../../layout/edit.xhtml">
       <ui:define name="label">Ist Kunde</ui:define>
       <h:selectBooleanCheckbox value="#{institutionController.instance.isCustomer}"/>
       </s:decorate>
      
       <div style="clear: both"><span class="required">*</span> Bitte Erfassen</div>
       </rich:panel>
       </a4j:outputPanel>
       </h:panelGrid>
       <h:messages globalOnly="true" styleClass="message" id="globalMessages" />
       </a4j:outputPanel>
       </a4j:form>
      </ui:composition>
      

      Firefox3 displayed everything fine. but IE7 overlaped the panels.
      do somebody know why?

      greeting

        • 1. Re: Display problem with IE and rich:panel
          ilya_shaikovsky

          please share the screenshot from FF somewhere

          • 2. Re: Display problem with IE and rich:panel
            ilya_shaikovsky

            sorry I meant IE7 for sure..

            • 4. Re: Display problem with IE and rich:panel
              mfahandezh
              • 5. Re: Display problem with IE and rich:panel
                ilya_shaikovsky

                seems this caused by some of your CSS classes on the divs.

                please use IE dev toolbar to check the styles applied to the wrong positioned div.

                • 6. Re: Display problem with IE and rich:panel
                  mfahandezh

                  maybe you are right. but all the css code are coming from richfaces. is it than a bug in richfaces oder IE?

                  • 7. Re: Display problem with IE and rich:panel
                    ilya_shaikovsky

                    No I mean not our classes but your own css. Please check this with the tool I suggested.

                    • 8. Re: Display problem with IE and rich:panel
                      mfahandezh

                      here is the source which i get out of "IE Developer toolbar". maybe u can see something.

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN"><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                      <HTML xmlns="http://www.w3.org/1999/xhtml">
                      <HEAD><STYLE>
                      /* Rule 36 of ../../stylesheet/theme.css */
                      .top {
                      VERTICAL-ALIGN: top
                      }
                      /* Rule 14 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-pnl-b {
                      PADDING-RIGHT: 10px;
                      PADDING-LEFT: 10px;
                      PADDING-BOTTOM: 10px;
                      PADDING-TOP: 10px
                      }
                      /* Rule 17 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-pnl-b {
                      FONT-SIZE: 11px;
                      COLOR: #000;
                      FONT-FAMILY: Arial,Verdana,sans-serif
                      }
                      /* Rule 12 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-pnl {
                      BORDER-RIGHT: 1px solid;
                      PADDING-RIGHT: 1px;
                      BORDER-TOP: 1px solid;
                      PADDING-LEFT: 1px;
                      PADDING-BOTTOM: 1px;
                      BORDER-LEFT: 1px solid;
                      PADDING-TOP: 1px;
                      BORDER-BOTTOM: 1px solid
                      }
                      /* Rule 15 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-pnl {
                      BORDER-LEFT-COLOR: #bed6f8;
                      BORDER-BOTTOM-COLOR: #bed6f8;
                      BORDER-TOP-COLOR: #bed6f8;
                      BACKGROUND-COLOR: #fff;
                      BORDER-RIGHT-COLOR: #bed6f8
                      }
                      /* Rule 1 of ../../stylesheet/theme.css */
                      BODY {
                      FONT-SIZE: 12px
                      }
                      /* Rule 17 of ../../stylesheet/theme.css */
                      BODY {
                      MARGIN: 0px;
                      COLOR: #616161;
                      FONT-FAMILY: Arial, sans-serif
                      }
                      /* Rule 28 of ../../stylesheet/theme.css */
                      .required {
                      PADDING-LEFT: 2px;
                      COLOR: red
                      }
                      /* Rule 23 of ../../stylesheet/theme.css */
                      .error {
                      PADDING-RIGHT: 5px;
                      PADDING-LEFT: 5px;
                      FLOAT: left;
                      PADDING-BOTTOM: 5px;
                      PADDING-TOP: 5px
                      }
                      /* Rule 22 of ../../stylesheet/theme.css */
                      .value {
                      PADDING-RIGHT: 5px;
                      PADDING-LEFT: 5px;
                      FLOAT: left;
                      PADDING-BOTTOM: 5px;
                      PADDING-TOP: 5px
                      }
                      /* Rule 6 of ../../stylesheet/theme.css */
                      INPUT {
                      BORDER-RIGHT: #bbbbbb 1px solid;
                      BORDER-TOP: #bbbbbb 1px solid;
                      FONT-SIZE: 10px;
                      BACKGROUND: #f0f8ff;
                      BORDER-LEFT: #bbbbbb 1px solid;
                      COLOR: black;
                      BORDER-BOTTOM: #bbbbbb 1px solid
                      }
                      /* Rule 21 of ../../stylesheet/theme.css */
                      .name {
                      CLEAR: left;
                      PADDING-RIGHT: 5px;
                      MARGIN-TOP: 3px;
                      PADDING-LEFT: 5px;
                      FONT-WEIGHT: bold;
                      FLOAT: left;
                      PADDING-BOTTOM: 5px;
                      VERTICAL-ALIGN: top;
                      WIDTH: 115px;
                      PADDING-TOP: 5px
                      }
                      /* Rule 87 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-toolbar-ext {
                      BORDER-RIGHT: #bed6f8 1px solid;
                      PADDING-RIGHT: 0px;
                      BACKGROUND-POSITION: left top;
                      BORDER-TOP: #bed6f8 1px solid;
                      PADDING-LEFT: 0px;
                      BACKGROUND-IMAGE: url(/SaaS_System/a4j/g/3_2_2.GAorg.richfaces.renderkit.html.GradientA/DATB/eAH7!!3Tj2v7mAAZZAV3);
                      PADDING-BOTTOM: 0px;
                      BORDER-LEFT: #bed6f8 1px solid;
                      PADDING-TOP: 0px;
                      BORDER-BOTTOM: #bed6f8 1px solid;
                      BACKGROUND-REPEAT: repeat-x;
                      BACKGROUND-COLOR: #bed6f8
                      }
                      /* Rule 88 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-toolbar-int {
                      PADDING-RIGHT: 10px;
                      PADDING-LEFT: 10px;
                      FONT-WEIGHT: bold;
                      FONT-SIZE: 11px;
                      PADDING-BOTTOM: 2px;
                      COLOR: #000;
                      PADDING-TOP: 2px;
                      FONT-FAMILY: Arial,Verdana,sans-serif;
                      WHITE-SPACE: nowrap
                      }
                      /* Rule 164 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table {
                      BORDER-TOP: #c0c0c0 1px solid;
                      BORDER-LEFT: #c0c0c0 1px solid;
                      BORDER-COLLAPSE: collapse;
                      BACKGROUND-COLOR: #fff;
                      empty-cells: show
                      }
                      /* Rule 15 of ../../stylesheet/theme.css */
                      .rich-table {
                      WIDTH: 100%
                      }
                      /* Rule 165 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table-cell {
                      BORDER-RIGHT: #c0c0c0 1px solid;
                      PADDING-RIGHT: 4px;
                      PADDING-LEFT: 4px;
                      FONT-SIZE: 11px;
                      PADDING-BOTTOM: 4px;
                      COLOR: #000;
                      PADDING-TOP: 4px;
                      BORDER-BOTTOM: #c0c0c0 1px solid;
                      FONT-FAMILY: Arial,Verdana,sans-serif
                      }
                      /* Rule 3 of ../../stylesheet/theme.css */
                      A:link {
                      COLOR: #0d5798
                      }
                      /* Rule 171 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table-thead {
                      BORDER-BOTTOM: #c0c0c0 1px solid
                      }
                      /* Rule 170 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table-subheader {
                      BACKGROUND-COLOR: #ecf4fe
                      }
                      /* Rule 172 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table-subheadercell {
                      BORDER-RIGHT: #c0c0c0 1px solid;
                      PADDING-RIGHT: 4px;
                      PADDING-LEFT: 4px;
                      FONT-SIZE: 11px;
                      PADDING-BOTTOM: 4px;
                      COLOR: #000;
                      PADDING-TOP: 4px;
                      FONT-FAMILY: Arial,Verdana,sans-serif;
                      WHITE-SPACE: nowrap;
                      TEXT-ALIGN: center
                      }
                      /* Rule 173 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table-sortable-header {
                      BACKGROUND-POSITION: right center;
                      BACKGROUND-REPEAT: no-repeat;
                      WHITE-SPACE: nowrap
                      }
                      /* Rule 177 of /SaaS_System/a4j/s/3_2_2.GA/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__ */
                      .dr-table-header-sort-img {
                      VERTICAL-ALIGN: middle
                      }
                      </STYLE></HEAD>
                      <BODY><TABLE><TBODY><TR><TD class="top"><DIV class="dr-pnl rich-panel " id="patp"><DIV class="dr-pnl-b rich-panel-body " id="patp_body"><TABLE><TBODY><TR><TD class="top"><SPAN id="out" xmlns="http://www.w3.org/1999/xhtml"><FORM id="out:customerListForm" name="out:customerListForm" action="/SaaS_System/system/mandator/CustomerTabPanel.seam" method="post" target="">
                      <DIV id="out:customerListForm:j_id138">
                      <TABLE>
                      <TBODY>
                      <TR>
                      <TD class="top">
                      <DIV class="dr-pnl rich-panel" id="out:customerListForm:j_id140">
                      <DIV class="dr-pnl-b rich-panel-body" id="out:customerListForm:j_id140_body">
                      <TABLE class="dr-toolbar-ext rich-toolbar" id="out:customerListForm:j_id141" cellSpacing="0" cellPadding="0" width="100%" border="0">
                      <TBODY>
                      <TR vAlign="middle">
                      <TD class="dr-toolbar-int rich-toolbar-item">
                      Liste
                      </TD>
                      <TD align="center">
                      <IMG src="http://192.168.2.20:8080/SaaS_System/a4j/g/3_2_2.GAorg.richfaces.renderkit.html.images.GridSeparatorImage/DATB/eAH7cW3f!--fGICAm4ETADk2BYk_" />
                      </TD>
                      <TD class="dr-toolbar-int rich-toolbar-item">
                      <INPUT id="out:customerListForm:j_id143" onclick="location.href='/SaaS_System/system/mandator/CustomerTabPanel.seam?actionMethod=system%2Fmandator%2FCustomerTabPanel.xhtml%3AcustomerController.newInstance&cid=7'; return false;" type="image" src="http://192.168.2.20:8080/SaaS_System/img/add_article.png" value="" />
                      </TD>
                      <TD width="100%">
                      </TD>
                      </TR>
                      </TBODY>
                      </TABLE>
                      <DIV id="out:customerListForm:appTable">
                      <DIV class="results">
                      <TABLE class="dr-table rich-table" id="out:customerListForm:customerList" cellSpacing="0" cellPadding="0" border="0">
                      <COLGROUP></COLGROUP>
                      <THEAD class="dr-table-thead">
                      <TR class="dr-table-subheader rich-table-subheader">
                      <TH class="dr-table-subheadercell rich-table-subheadercell" id="out:customerListForm:customerList:j_id146header" style="CURSOR: pointer" onclick="A4J.AJAX.Submit('_viewRoot','out:customerListForm',event,{'parameters':{'fsp':'out:customerListForm:customerList:j_id146','out:customerListForm:customerList':'fsp'} ,'actionUrl':'/SaaS_System/system/mandator/CustomerTabPanel.seam'} )" scope="col">
                      <DIV id="out:customerListForm:customerList:j_id146header:sortDiv" xmlns="http://www.w3.org/1999/xhtml">
                      <SPAN class="dr-table-sortable-header">Name<IMG class="dr-table-header-sort-img rich-sort-icon" height="15" src="http://192.168.2.20:8080/SaaS_System/a4j/g/3_2_2.GAorg.richfaces.renderkit.html.iconimages.DataTableIconSortNone/DATB/eAFjYGD4!!8!AAYAAv4_" width="15" /></SPAN>
                      </DIV>
                      <DIV>
                      <INPUT class="rich-filter-input" onkeyup="A4J.AJAX.Submit('_viewRoot','out:customerListForm',event,{'parameters':{'out:customerListForm:customerList':'fsp'} ,'actionUrl':'/SaaS_System/system/mandator/CustomerTabPanel.seam'} )" onclick="Event.stop(event);" name="out:customerListForm:customerList:j_id146fsp" value="" />
                      </DIV>
                      </TH>
                      </TR>
                      </THEAD>
                      <TBODY id="out:customerListForm:customerList:tb">
                      <TR class="dr-table-firstrow rich-table-firstrow">
                      <TD class="dr-table-cell rich-table-cell" id="out:customerListForm:customerList:0:j_id146">
                      <A id="out:customerListForm:customerList:0:j_id148" onclick="A4J.AJAX.Submit('_viewRoot','out:customerListForm',event,{'parameters':{'out:customerListForm:customerList:0:j_id148':'out:customerListForm:customerList:0:j_id148','customerId':'1','ajaxSingle':'out:customerListForm:customerList:0:j_id148'} ,'actionUrl':'/SaaS_System/system/mandator/CustomerTabPanel.seam'} );return false;" href="http://192.168.2.20:8080/SaaS_System/system/mandator/CustomerTabPanel.seam?cid=5#" name="out:customerListForm:customerList:0:j_id148">Kreuzgemeinde X</A>
                      </TD>
                      </TR>
                      <TR class="dr-table-firstrow rich-table-firstrow">
                      <TD class="dr-table-cell rich-table-cell" id="out:customerListForm:customerList:1:j_id146">
                      <A id="out:customerListForm:customerList:1:j_id148" onclick="A4J.AJAX.Submit('_viewRoot','out:customerListForm',event,{'parameters':{'customerId':'2','ajaxSingle':'out:customerListForm:customerList:1:j_id148','out:customerListForm:customerList:1:j_id148':'out:customerListForm:customerList:1:j_id148'} ,'actionUrl':'/SaaS_System/system/mandator/CustomerTabPanel.seam'} );return false;" href="http://192.168.2.20:8080/SaaS_System/system/mandator/CustomerTabPanel.seam?cid=5#" name="out:customerListForm:customerList:1:j_id148">Kreuzgemeinde Y</A>
                      </TD>
                      </TR>
                      </TBODY>
                      </TABLE>
                      </DIV>
                      </DIV>
                      </DIV>
                      </DIV>
                      </TD>
                      <TD class="top">
                      <DIV id="out:customerListForm:appDetail">
                      <!-- ++++++++++++++++++++++++++++++ Detail ++++++++++++++++++++++ -->
                      <DIV class="dr-pnl rich-panel" id="out:customerListForm:j_id152">
                      <DIV class="dr-pnl-b rich-panel-body" id="out:customerListForm:j_id152_body">
                      <TABLE class="dr-toolbar-ext rich-toolbar" id="out:customerListForm:j_id153" cellSpacing="0" cellPadding="0" width="100%" border="0">
                      <TBODY>
                      <TR vAlign="middle">
                      <TD class="dr-toolbar-int rich-toolbar-item">
                      Detail
                      </TD>
                      <TD align="center">
                      <IMG src="http://192.168.2.20:8080/SaaS_System/a4j/g/3_2_2.GAorg.richfaces.renderkit.html.images.GridSeparatorImage/DATB/eAH7cW3f!--fGICAm4ETADk2BYk_" />
                      </TD>
                      <TD class="dr-toolbar-int rich-toolbar-item">
                      <INPUT id="out:customerListForm:save" onclick="A4J.AJAX.Submit('_viewRoot','out:customerListForm',event,{'parameters':{'out:customerListForm:save':'out:customerListForm:save'} ,'actionUrl':'/SaaS_System/system/mandator/CustomerTabPanel.seam'} );return false;" type="image" alt="Save" src="http://192.168.2.20:8080/SaaS_System/img/add.png" name="out:customerListForm:save" value="Save" />
                      </TD>
                      <TD width="100%">
                      </TD>
                      </TR>
                      </TBODY>
                      </TABLE>
                      <DIV id="out:customerListForm:nameDecoration">
                      <DIV class="prop">
                      <LABEL class="name" for="out:customerListForm:nameDecoration:name">Name<SPAN class="required" id="out:customerListForm:nameDecoration:j_id158">*</SPAN></LABEL> <SPAN class="value"><INPUT id="out:customerListForm:nameDecoration:name" onblur="A4J.AJAX.Submit('_viewRoot','out:customerListForm',event,{'control':this,'parameters':{'ajaxSingle':'out:customerListForm:nameDecoration:name','out:customerListForm:nameDecoration:j_id162':'out:customerListForm:nameDecoration:j_id162'} ,'actionUrl':'/SaaS_System/system/mandator/CustomerTabPanel.seam'} )" maxLength="30" size="30" name="out:customerListForm:nameDecoration:name" value="" /></SPAN> <SPAN class="error"></SPAN>
                      </DIV>
                      </DIV>
                      <DIV style="CLEAR: both">
                      <SPAN class="required">*</SPAN> Bitte Erfassen
                      </DIV>
                      </DIV>
                      </DIV>
                      </DIV>
                      </TD>
                      </TR>
                      </TBODY>
                      </TABLE>
                      </DIV>
                      </FORM></SPAN></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></BODY></HTML>
                      


                      i have realy a less css myself. and at this div is only richfaces css.

                      PS: i use bluesky skin.


                      • 9. Re: Display problem with IE and rich:panel
                        ilya_shaikovsky

                        sorry but still can't reproduce.. send me war sample please directly.