Hidden Container Mismatch

There is a mismatch between JSF page definition, hidden containers and rich widgets that need dimension calculation. If you are a fellow PrimeFaces user, it is likely that you’ve faced with issues like this before, consider the following cases;

<p:dialog>
    <p:editor />
</p:dialog>

That will not work because editor renders itself in DOM on page load so needs dimension information, which jQuery cannot provide as dialog is hidden, our dirty workaround was using a lazy editor and initialize it when dialog is shown.

<p:dialog onShow="edt.init()">
    <p:editor widgetVar="edt"/>
</p:dialog>

The problem is, this is not a generic solution as PrimeFaces has various components that have hidden containers like dialog, inactive tabs of tabview, accordion, wizard and also several components that need dimensions on initialization like editor, schedule, charts and more.

We are glad to share that upcoming PrimeFaces 3.0.M4 has a generic solution for this, so on page you don’t need to deal with these as PrimeFaces handles these under the hood for you.

M4 and RC1 in general focuses on maintenance to bring you a stable and easier to use PrimeFaces.

This entry was posted in PrimeFaces. Bookmark the permalink.

4 thoughts on “Hidden Container Mismatch

  1. Me and my team loves primefaces, we had this kinda problem, goog to know now we dont have to worry, its taken care in the core component library, in near future we will post our website/app so that other primefaces users too can have a look.

    AB

  2. is this related to image gallery’s rendering too. because when gallery load images height is sum of all images and this brokes page desing when images is huge and slowly loading.
    will image gallery be fixed too ??

  3. This is exactly the problem that I faced when using drop down lists in a dialog. I wasn’t even aware of the ‘dirty workaround’ glad to see it’s taken care of in the next release