How to get menuBar to overflow in fullPage-layout?

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

12 Jun 2012, 00:39

Before I was using Primefaces normal fullpage-layout, but I changed it today to PE-fullPage layout. Basically I got two new problems.

1) Menus go under the center pane. I tried the same thing what I did before with p:layout:

.pe-layout-outer-north {
overflow: visible !important;
padding: 4px;
}
.pe-layout-north {
z-index:20 !important;
overflow: visible !important;
padding: 4px;
}
It is not working, so how can I manage this one out?

2) I have a theme switcher in the west pane. There is no scrollbar anymore and the last themes go under the south pane. Before there was a scroller, but not anymore :)

Thanks for the great extension!
Sami

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

12 Jun 2012, 09:04

Hi and welcome to the forum,

1) In the showcase we have p:selectOneMenu (as theme switcher) in the north panel and it works. Also consider these tricks to work with Drop-Downs: http://layout.jquery-dev.net/documentat ... Drop-Downs Widget of PF Ext. Layout has allowOverflow() / resetOverflow() by the way.

2) Post your code with the theme switcher in the west pane please. What scrollbars do you mean, from theme switcher or from layout pane? Any screenshots would be useful too.

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

12 Jun 2012, 14:33

Hi and thanks for fast answering!

1) I am really bad with css-staff. How you guys do it? Do you first search with firebug, what css-classes there is and then what? CSS is inside the jar so do you make a new css and override the pf or pfE css-classes? I just add those classes inside the <script>-tag to xhtml-page, but because I am using templates, it is not working. Should this work without any hassle?

Image

Btw, this is really stupid question, but I still do it :) If you check my north pane, there is menus, but if I want to get something to far right, what is the best way to do it? I tried yesterday panelgrid, but it makes stupid looking boxes/borders around the cells. I would like to move my theme and locale menus to the north pane, but because of that overflow-problem and that, I can't do it. Basically I would like to have exactly similar structure with theme switcher and everything than you have got in you page:

http://fractalsoft.net/primeext-showcas ... s/home.jsf

Could you give me the source for that?

2) Image

As you see I am using menu because it looks little bit nicer :)

Code: Select all

<ui:composition>
            <h:form>

                <p:menubar>
                    <p:submenu label="Themes">
                        
                        <p:menuitem value="Afterdark" ajax="false" actionListener="#{themeSwitcher.setTheme('afterdark')}"/>
                        <p:menuitem value="Afternoon" ajax="false" actionListener="#{themeSwitcher.setTheme('afternoon')}"/>
                        <p:menuitem value="Afterwork" ajax="false" actionListener="#{themeSwitcher.setTheme('afterwork')}"/>
                        <p:menuitem value="Aristo" ajax="false" actionListener="#{themeSwitcher.setTheme('aristo')}"/>
                        <p:menuitem value="Black-Tie" ajax="false" actionListener="#{themeSwitcher.setTheme('black-tie')}"/>
                        <p:menuitem value="Blitzer" ajax="false" actionListener="#{themeSwitcher.setTheme('blitzer')}"/>
                        <p:menuitem value="Bluesky" ajax="false" actionListener="#{themeSwitcher.setTheme('bluesky')}"/>
                        <p:menuitem value="Casablanca" ajax="false" actionListener="#{themeSwitcher.setTheme('casablanca')}"/>
                        <p:menuitem value="Cupertino" ajax="false" actionListener="#{themeSwitcher.setTheme('cupertino')}"/>
                        <p:menuitem value="Dark-Hive" ajax="false" actionListener="#{themeSwitcher.setTheme('dark-hive')}"/>
                        <p:menuitem value="Dot-Luv" ajax="false" actionListener="#{themeSwitcher.setTheme('dot-luv')}"/>
                        <p:menuitem value="Eggplant" ajax="false" actionListener="#{themeSwitcher.setTheme('eggplant')}"/>
                        <p:menuitem value="Excite-Bike" ajax="false" actionListener="#{themeSwitcher.setTheme('excite-bike')}"/>
                        <p:menuitem value="Flick" ajax="false" actionListener="#{themeSwitcher.setTheme('flick')}"/>
                        <p:menuitem value="Glass-X" ajax="false" actionListener="#{themeSwitcher.setTheme('glass-x')}"/>
                        <p:menuitem value="Hot-Sneaks" ajax="false" actionListener="#{themeSwitcher.setTheme('hot-sneaks')}"/>
                        <p:menuitem value="Home" ajax="false" actionListener="#{themeSwitcher.setTheme('home')}"/>
                        <p:menuitem value="Humanity" ajax="false" actionListener="#{themeSwitcher.setTheme('humanity')}"/>
                        <p:menuitem value="Leevi's Green" ajax="false" actionListener="#{themeSwitcher.setTheme('le-frog')}"/>
                        <p:menuitem value="Midnight" ajax="false" actionListener="#{themeSwitcher.setTheme('midnight')}"/>
                        <p:menuitem value="Mint-Choc" ajax="false" actionListener="#{themeSwitcher.setTheme('mint-choc')}"/>
                        <p:menuitem value="Overcast" ajax="false" actionListener="#{themeSwitcher.setTheme('overcast')}"/>
                        <p:menuitem value="Pepper-Grinder" ajax="false" actionListener="#{themeSwitcher.setTheme('pepper-grinder')}"/>
                        <p:menuitem value="Redmond" ajax="false" actionListener="#{themeSwitcher.setTheme('redmond')}"/>
                        <p:menuitem value="Rocket" ajax="false" actionListener="#{themeSwitcher.setTheme('rocket')}"/>
                        <p:menuitem value="Samuel" ajax="false" actionListener="#{themeSwitcher.setTheme('sam')}"/>
                        <p:menuitem value="Smoothness" ajax="false" actionListener="#{themeSwitcher.setTheme('smoothness')}"/>
                        <p:menuitem value="South-Street" ajax="false" actionListener="#{themeSwitcher.setTheme('south-street')}"/>
                        <p:menuitem value="Start" ajax="false" actionListener="#{themeSwitcher.setTheme('start')}"/>
                        <p:menuitem value="Sunny" ajax="false" actionListener="#{themeSwitcher.setTheme('sunny')}"/>
                        <p:menuitem value="Swanky-Purse" ajax="false" actionListener="#{themeSwitcher.setTheme('swanky-purse')}"/>
                        <p:menuitem value="Trontastic" ajax="false" actionListener="#{themeSwitcher.setTheme('trontastic')}"/>
                        <p:menuitem value="UI-Darkness" ajax="false" actionListener="#{themeSwitcher.setTheme('ui-darkness')}"/>
                        <p:menuitem value="UI-Lightness" ajax="false" actionListener="#{themeSwitcher.setTheme('ui-lightness')}"/>
                        <p:menuitem value="Vader" ajax="false" actionListener="#{themeSwitcher.setTheme('vader')}"/>
                    </p:submenu> 
                </p:menubar>
            </h:form>
Thanks a lot and sorry for my English, try to survive!
Sami

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

12 Jun 2012, 15:13

Hi Sami,

Yes, use Firebug to fígure out CSS selectors. Place your custom CSS files in h:head or somewhere close to h:body.

Right aligned elements (e.g. menu) has CSS float:right.

Check out our project http://code.google.com/p/primefaces-ext ... e/checkout, go to "samples/showcase" sub-project and explore the showcase. Theme switcher is in the masterTemplate.xhtml I think.

P.S. By the way, what you ask will be explained in the upcoming PrimeFaces Cookbook.
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

13 Jun 2012, 12:38

Thanks Oleg!

That Cookbook will be published when? I definitely will buy it. Btw, I just recognized that if my page doesn't fit to the center pane, there is no scrollbar either. If for instance Submit button is not visible, user can't scroll the page down and submit the page at all :) Those are working in Primefaces fullpage layout, but not here. Any workaround to this?

Thanks,
Sami
Oleg wrote:Hi Sami,

Yes, use Firebug to fígure out CSS selectors. Place your custom CSS files in h:head or somewhere close to h:body.

Right aligned elements (e.g. menu) has CSS float:right.

Check out our project http://code.google.com/p/primefaces-ext ... e/checkout, go to "samples/showcase" sub-project and explore the showcase. Theme switcher is in the masterTemplate.xhtml I think.

P.S. By the way, what you ask will be explained in the upcoming PrimeFaces Cookbook.

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

13 Jun 2012, 13:50

More to Cookbook here viewtopic.php?f=3&t=20555

Regarding full-page layout I can't recognize what the problem is. Our showcase uses this layout too http://fractalsoft.net/primeext-showcas ... s/home.jsf All pages are ok. Scrollbars are always here. I use this layout in one business app with 100+ buttons and other complex elements - tree, datatables, picklist, menus, ... No problem at all in all browsers. Did you maybe applied special CSS selectors?
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

13 Jun 2012, 14:12

Oleg wrote:More to Cookbook here viewtopic.php?f=3&t=20555

Regarding full-page layout I can't recognize what the problem is. Our showcase uses this layout too http://fractalsoft.net/primeext-showcas ... s/home.jsf All pages are ok. Scrollbars are always here. I use this layout in one business app with 100+ buttons and other complex elements - tree, datatables, picklist, menus, ... No problem at all in all browsers. Did you maybe applied special CSS selectors?
It is just a big form in panel, so many rows that it doesn't fit to the page and you have to scroll it little bit lower to see the checkbox and Save/Submit button, but no scrollbar there, so scrolling is impossible. It used to work in pf layout, but not this one. I haven't done any changes to this since pf layout, just changed the pf to pfE layout. The same problem is in themeswitcher, there is no scrollbar, so user can't see all of the themes.

http://img441.imageshack.us/img441/4162 ... 3at104.png

Image

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

13 Jun 2012, 14:45

It's very strange that you don't have scrollbars. Did you maybe played with "overflow" or "height" CSS properties for your form / div or whatever inside of layout pane?

You see our Showcase for PF Extensions. No problem with scrollbars.
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

13 Jun 2012, 15:20

Oleg wrote:It's very strange that you don't have scrollbars. Did you maybe played with "overflow" or "height" CSS properties for your form / div or whatever inside of layout pane?

You see our Showcase for PF Extensions. No problem with scrollbars.

You were right! My css broke the scrolling. I just left that noBorder class and now it is working. I have that in my templates head:

Code: Select all

<style type="text/css">
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;

            }
            
            .pe-layout-pane-content {
                padding: 1ex;
                overflow: visible !important;
                border: none;
            }
            .pe-layout-outer-north {
                overflow: visible !important;
                padding: 4px;
            }
            .pe-layout-north {
                z-index:20 !important;
                overflow: visible !important;
                padding: 4px;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;


            }

            .noBorders tr, .noBorders td {
                background: none !important;
                border: none !important;
            }           



        </style>

So that is solved now, then I need to get that overflow problem solved somhow. Thank a lot! It is very nice that you have energy to answer me. I have a big problem with my hosting service, they have just a bad customer service and it is making me mad :( I have sent 5 emails to them to ask help, but they are just ignoring me. Cheap and quality, that is just impossible combination.

Sami

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

13 Jun 2012, 16:30

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

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests