3 Replies Latest reply on May 7, 2012 6:16 AM by quajo

Problems with link to external css with popupPanel and extendedDataTable

quajo May 2, 2012 7:53 AM

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>

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

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;">

</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

healeyb May 2, 2012 3:23 PM (in response to quajo)

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.
Actions
2. Re: Problems with link to external css with popupPanel and extendedDataTable

quajo May 3, 2012 4:57 AM (in response to healeyb)

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.
Actions
3. Re: Problems with link to external css with popupPanel and extendedDataTable

quajo May 7, 2012 6:16 AM (in response to quajo)

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.
Actions

Go to original post