How to get menuBar to overflow in fullPage-layout?

Community Driven Extensions Project
sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

13 Jun 2012, 18:52

Oleg wrote:Huh, glad to hear you got it working.

Regarding overflow problem. Have you read this link I posted above http://layout.jquery-dev.net/documentat ... Drop-Downs ? Our layout widget also has allowOverflow() / resetOverflow() as described in this link. Try to use it. We could also introduce a new attribute "showOverflowOnHover" as described in the link.
Yes I read it, but I have to say that I have no idea how to use it like that in xhtml-page?

Code: Select all

<pe:layoutPane position="north" size="50"  resizable="false" closable="false" spacing="0" rendered="true" >  
                <ui:insert name="north">
                    <ui:include src="/resources/templates/menuBar.xhtml"/>    
                </ui:insert>
            </pe:layoutPane>  
So where the heck I should put that?
myLayout.allowOverflow('north');

I think that it should overflow north and center panes. Btw what was wrong in my css? I just tried to override pfe:s own css-classes. Did you say that this overflowing should work as a default?

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

13 Jun 2012, 21:56

Code: Select all

<pe:layout widgetVar="myLayout" ...>
Call

Code: Select all

myLayout.allowOverflow('north');
if you show menu items.

And try to play with z-index.
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

sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

14 Jun 2012, 15:44

Oleg wrote:

Code: Select all

<pe:layout widgetVar="myLayout" ...>
Call

Code: Select all

myLayout.allowOverflow('north');
if you show menu items.

And try to play with z-index.
1) Still no idea. I tried to read from PF user guide how to use those widgets, still no idea. I tried to read from forum, but still feeling dummy. I have spent two days to this and I think that I should return to PF layout, because I just can't get this working. In my template I create a widget property called myLayout, but I still have no idea how to call it and where? Should I go to menuBar.xhtml and add myLayout.allowOverflow('north'); but where? There is no onmouseover or something like that. Feeling really dummy now :(

2) Should it work on default? If yes, maybe I should check something else than this?

3) is it so, that this can't be done via CSS like in PF side?

4) Any tutorial how to use those widgetvars?

Code: Select all

<h:body>

        <pe:layout widgetVar="myLayout" fullPage="true" > 

            <pe:layoutPane  position="north" size="50"  resizable="false" closable="false" spacing="0" rendered="true" >  
                <ui:insert name="north">
                  
                    <ui:include src="/resources/templates/menuBar.xhtml"/>    
                </ui:insert>
            </pe:layoutPane>  



            <pe:layoutPane position="west" size="215"  resizable="true" closable="true" spacing="-4">  
                <ui:insert name="west">

                </ui:insert>         
            </pe:layoutPane>   



            <pe:layoutPane position="east" size="200"  resizable="true" closable="true" spacing="-4" >  
                <ui:insert name="east"> 

                    <ui:include src="/resources/templates/commonRight.xhtml"/>  
                </ui:insert>
            </pe:layoutPane> 




            <pe:layoutPane position="center"  size="800" resizable="false">  
                <h2>
                    <ui:insert name="title">Default Title</ui:insert>
                </h2>

                <ui:insert name="center">

                    Center from newTemplate

                </ui:insert>
            </pe:layoutPane> 

I am happy that you try to help me, because this is totally show stopper at the moment.
Sami

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

14 Jun 2012, 15:51

Sami, have you tried to set z-index: 9999 or similar on menu container?

Did you read this post e.g.? viewtopic.php?f=3&t=21944&hilit=layout+menu
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

sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

14 Jun 2012, 16:10

Oleg wrote:Sami, have you tried to set z-index: 9999 or similar on menu container?

Did you read this post e.g.? viewtopic.php?f=3&t=21944&hilit=layout+menu
What does it mean Menu-container?

I tried once this one:

.pe-layout-outer-north {
overflow: visible !important;
padding: 4px;
}
.pe-layout-north {
z-index:9999 !important;
overflow: visible !important;
padding: 4px;
}

Are you sure that north pane is the problem? It goes under the center pane, not north pane? Could you please answer my other questions as well, because I am trying to learn something as well :D How does it work in your showcase, can you remember what you have done with it? I think that I have almost the same Global.css what you are using, we have the same css from pf and from pfe, so what can make the difference. Btw what is that z-index and what for, why 9999?

Yes I read that message, but there is no solution, he is still fighting with almost the same problem than me.

I am just starting to cry :)
Sami

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

14 Jun 2012, 16:45

Oh, eh... No, not z-index for pe-layout-*. For menu container. Menu is rendered as HTML div element or whatever with other HTML elements inside. Look in Firebug please. Sorry, I don't have much time to support you in these questions.
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

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

14 Jun 2012, 18:43

Your problem is that you try to manipulate pe-layout-* styles. Where did you see this at all? Don't try to change default styles. Remove them and try again. No CSS changes are needed. Simple place menu in layout and it should work. We don't change layout CSS in our showcase.
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

sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

15 Jun 2012, 01:43

Oleg wrote:Oh, eh... No, not z-index for pe-layout-*. For menu container. Menu is rendered as HTML div element or whatever with other HTML elements inside. Look in Firebug please. Sorry, I don't have much time to support you in these questions.
Ugh :)

If I change the div's z-index and .pe-layout-pane-content: overflow:visible, it is working :) more than 1 and it is working, yeah X,Y,Z. But when I add that .pe-layout-pane-content thing, scrolling is not working anymore, no scrollbars. So is this possible to get both of them working at the same time, yes I think so.



<div id="j_idt9-layout-outer-north" class="pe-layout-outer-north ui-layout-pane ui-layout-pane-north" style="position: absolute; margin: 0px; bottom: auto; width: auto; z-index: 9999; top: 0px; left: 0px; right: 0px; height: 44px; display: block; visibility: visible; ">

I tried this one in my template, but no success. It is always 1:

Code: Select all

<style type="text/css">
.pe-layout-outer-north .ui-layout-pane .ui-layout-pane-north{
               
               z-index: 9999 !important; 
                
            }
Thanks!
Sami

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

15 Jun 2012, 09:35

Again, don't set z-index for .pe-layout-outer-north. It should be as small as possible. Set z-index on menu divs if any. I don't modify my CSS at all and everything is ok. You don't need to change .pe-layout-*. Remove all CSS settings for that in your CSS files.
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

sanurmi
Posts: 50
Joined: 04 Mar 2012, 23:23

15 Jun 2012, 10:35

Oleg wrote:Again, don't set z-index for .pe-layout-outer-north. It should be as small as possible. Set z-index on menu divs if any. I don't modify my CSS at all and everything is ok. You don't need to change .pe-layout-*. Remove all CSS settings for that in your CSS files.
But, menu is in that div. How can I change the z-index otherwise, no idea :( I removed those css-changes and tried to add z-index straight to my menuBar.xhtml like that:

<h:body>
<ui:composition>
<h:form>
<p:menubar rendered="true" style="border: none; z-index: 9999; overflow: visible" >

That is not working.

I have got just template and then menuBar.xhtml like that, nothing else and menu is not working. How can it work in your case, strange:

Code: Select all

   <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <h:outputStylesheet library="css" name="global.css"/>
        <style type="text/css">


            .noBorders tr, .noBorders td {
                background: none !important;
                border: none !important;
            } 
        </style>



        
    </h:head>

    <h:body>

        <pe:layout  fullPage="true" > 

            <pe:layoutPane  position="north" size="50"  resizable="false" closable="false" spacing="0" rendered="true" >  
                <ui:insert name="north">

                    <ui:include src="/resources/templates/menuBar.xhtml"/>    
                </ui:insert>
            </pe:layoutPane>  



            <pe:layoutPane position="west" size="215"  resizable="true" closable="true" spacing="-3">  
                <ui:insert name="west">

                </ui:insert>         
            </pe:layoutPane>   



            <pe:layoutPane position="east" size="200"  resizable="true" closable="true" spacing="-4" >  
                <ui:insert name="east"> 

                    <ui:include src="/resources/templates/commonRight.xhtml"/>  
                </ui:insert>
            </pe:layoutPane> 




            <pe:layoutPane position="center"  size="800" resizable="false">  
                <h2>
                    <ui:insert name="title">Default Title</ui:insert>
                </h2>

                <ui:insert name="center">

                    Center from newTemplate

                </ui:insert>
            </pe:layoutPane> 

            <pe:layoutPane position="south" rendered="false" statusbar="false" size="60" resizable="true" closable="true" spacing="0">  
                <ui:insert name="south">


                    <ui:include src="/resources/templates/commonFooter.xhtml"/>


                </ui:insert>
            </pe:layoutPane>  

        </pe:layout>  
    </h:body>
AND menuBar.xhtml:

Code: Select all

<h:head>
        <title>menuBar.xhtml</title>
        
              

    </h:head>
    <h:body>
        <ui:composition>
            <h:form>
                <p:menubar rendered="true" style="border: none; z-index: 9998; overflow: visible" >
 <p:submenu label="#{bundle.menuBar_partners}" icon="ui-icon-document">
                        <p:menuitem value="#{bundle.menuBar_partners_info}" url="#"/>
                        <p:submenu label="cars" icon="ui-icon-contact" >
                            <p:menuitem value="www.rangerover.com" url="http://www.rangerover.com"/>
                            
                        </p:submenu>
...
                    
Nothing else.
Cheers,
Sami

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests