3 Replies Latest reply on May 7, 2012 6:16 AM by Joaquín Carrasco

    Problems with link to external css with popupPanel and extendedDataTable

    Joaquín Carrasco Newbie

      Hi, for a long time I have been using a extendedDatatable inside popuppanel in a project and I have never had problems.. But now I´m trying richfaces 4.2.1 because I want to migrate my old project from 4.0.0 to 4.2.1, and for that I have created a small application showing the extendeddatatable inside a popuppanel used in richfaces showcase examples. The problem is when I link to a external css from Ext library that I used in my old project, the popuppanel is not shown, and If I remove the popuppanel and I put only the extendeddatatable is shown but the selection listener doesn´t work. The line that causes the error is:  <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" /> and my code is the following:

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:rich="http://richfaces.org/rich">

                     

                      <h:head>

                                     

                  <script type="text/javascript"

                  src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>

                  <link rel="stylesheet" type="text/css"

                  href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />

             

                      </h:head>

                      <h:body>

             

                     

              <h:form id="form">

              <rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()" show="true" domElementAttachment="form">

              <f:facet name="header">

                  <h:outputText value="Simple popup panel" />

              </f:facet>

              <f:facet name="controls">

                  <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">

                      A

                  </h:outputLink>

              </f:facet>

              <rich:extendedDataTable value="#{extTableSelectionBean.inventoryItems}" var="car"

                                          selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"

                                          style="height:300px; width:310px; ">

                      <a4j:ajax execute="@form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"

                                render=":res"/>

                      <f:facet name="header">

                          <h:outputText value="Cars marketplace"/>

                      </f:facet>

                      <rich:column>

                          <f:facet name="header">

                              <h:outputText value="Vendor"/>

                          </f:facet>

                          <h:outputText value="#{car.vendor}"/>

                      </rich:column>

                      <rich:column>

                          <f:facet name="header">

                              <h:outputText value="Model"/>

                          </f:facet>

                          <h:outputText value="pepo"/>

                      </rich:column>

                      <rich:column>

                          <f:facet name="header">

                              <h:outputText value="Price"/>

                          </f:facet>

                          <h:outputText value="#{car.price}"/>

                      </rich:column>

                  </rich:extendedDataTable>

                    </rich:popupPanel>

                    </h:form>

                    </h:body>

      </ui:composition>

       

       

      Any Help? Thanks a lot.

        • 1. Re: Problems with link to external css with popupPanel and extendedDataTable
          Brendan Healey Master

          I just put the script and link tags in a test page and the resources load ok. When you ui:include the page shown

          in your post is this done inside a h:form? I just wondered if you could have nested forms. If it is included inside a

          form, remove the extra form wrapping the popupPanel. If not, put a h:form inside the popupPanel and remove

          domElementAttachment="form".

           

          The reason this is all so confusing is basically down to the need to position a dialog relative to the viewport and

          css positioning rules. A div is only positioned relative to the browser window if it has an absolute position and is

          NOT nested inside any tag that has absolute, relative or fixed position. Otherwise it is positioned relative to the

          containing tag. So to achieve positioning relative to the viewport no matter where you put your dialog (i.e. div) it

          is relocated as a child of the body. So even if your dialog is within a form, it gets moved outside the form.

           

          This doesn't necessarily help to explain why the popupPanel isn't displayed, but the code that does that isn't

          shown.

           

          Regards,

          Brendan.

          • 2. Re: Problems with link to external css with popupPanel and extendedDataTable
            Joaquín Carrasco Newbie

            Hi Brendan, thanks for your answer. I don´t have nested forms. The code I wrote above was the only page that I have in my test app. I don´t use ui:include. I tried to remove the form wrapping popuppanel, put it inside and remove domElementAttachment as well, but it doesn´t works. It´s very strange because if don´t use pouppanel and I show the extendeddatable in the page without the popuppanel, the extendeddatatable is shown but the selection listener is never called. Suddenly all works if the line <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" /> is removed. There must be a conflict.

            • 3. Re: Problems with link to external css with popupPanel and extendedDataTable
              Joaquín Carrasco Newbie

              Updating the link to a newer version of Ext:<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css"></link> the popuppanel is shown and no more conflicts.