Layout Unit in Primefaces Extension not sizing well.

Community Driven Extensions Project
Post Reply
kanwarmanish
Posts: 34
Joined: 28 Feb 2012, 15:28

09 May 2012, 11:13

I am trying to use the layout component from the primefaces extension. Browser - Chrome on UBuntu. The minwidth in the West pane is not having any effect and by default is showing only 100px wide and not 250px wide as coded.

Here is the Code

Code: Select all

        <pe:layout fullPage="true" rendered="true" >  
            <pe:layoutPane position="north" closable="false" resizable="false" size="'100px'" spacing="0">
                North
            </pe:layoutPane>
            <pe:layoutPane position="west" closable="true" resizable="true" size="'250px'" spacing="3" minWidth="'250px'">
                Left
            </pe:layoutPane>
            <pe:layoutPane position="center">  
                Center  
            </pe:layoutPane>  
        </pe:layout> 
Thanks
KM
PrimeFaces 3.2
JSF 2.1 (Mojarra)
GlassFish 3.1.2
JDK 1.7
NetBeans 7.1.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

09 May 2012, 11:19

Hi,

minWidth / minHight should not be used in apostrophes and should not contain "px". Only size in % should be used in apostrophes. Valid examples:

Code: Select all

size="200"
size="'33%'"
minHeight="60"
minWidth="250"
Look source code to this example please: http://fractalsoft.net/primeext-showcas ... Layout.jsf
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

kanwarmanish
Posts: 34
Joined: 28 Feb 2012, 15:28

09 May 2012, 12:24

Oleg wrote:Hi,

minWidth / minHight should not be used in apostrophes and should not contain "px". Only size in % should be used in apostrophes. Valid examples:

Code: Select all

size="200"
size="'33%'"
minHeight="60"
minWidth="250"
Look source code to this example please: http://fractalsoft.net/primeext-showcas ... Layout.jsf

Thanks for pointing out. Fixed that part. So the first problem of correct width not rendering is solved.

However the second part of minWidth not working is still a problem. Updated code below:

Code: Select all


    <h:body>

        <pe:layout fullPage="true" rendered="true" >  
            <pe:layoutPane position="north" closable="false" resizable="false" size="100" spacing="0">
                North 1
            </pe:layoutPane>
            <pe:layoutPane position="west" closable="true" resizable="true" size="250" spacing="3" minWidth="200">
                Left
            </pe:layoutPane>
            <pe:layoutPane position="center">  
                Center  
            </pe:layoutPane>  
        </pe:layout>  
        
    </h:body>
PrimeFaces 3.2
JSF 2.1 (Mojarra)
GlassFish 3.1.2
JDK 1.7
NetBeans 7.1.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

09 May 2012, 15:21

You should use "minSize" / "maxSize" for panels except "center". E.g. minSize="180" maxSize="500". minWidth / minHeight are only valid for "center" panel. This is how native jQuery layout plugin works. It means in your case:

Code: Select all

            <pe:layoutPane position="west" closable="true" resizable="true" spacing="3" size="250" minSize="200">
                Left
            </pe:layoutPane>
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

kanwarmanish
Posts: 34
Joined: 28 Feb 2012, 15:28

10 May 2012, 02:43

Oleg wrote:You should use "minSize" / "maxSize" for panels except "center". E.g. minSize="180" maxSize="500". minWidth / minHeight are only valid for "center" panel. This is how native jQuery layout plugin works. It means in your case:

Code: Select all

            <pe:layoutPane position="west" closable="true" resizable="true" spacing="3" size="250" minSize="200">
                Left
            </pe:layoutPane>
Bingo!

Solved.

Thanks a ton.

KM
PrimeFaces 3.2
JSF 2.1 (Mojarra)
GlassFish 3.1.2
JDK 1.7
NetBeans 7.1.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests