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

    Display problem with IE and rich:panel

    Mazda Fahandezh Saadi Newbie

      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 Master

          please share the screenshot from FF somewhere

          • 2. Re: Display problem with IE and rich:panel
            Ilya Shaikovsky Master

            sorry I meant IE7 for sure..

            • 5. Re: Display problem with IE and rich:panel
              Ilya Shaikovsky Master

              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
                Mazda Fahandezh Saadi Newbie

                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 Master

                  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
                    Mazda Fahandezh Saadi Newbie

                    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 Master

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