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
How to get menuBar to overflow in fullPage-layout?
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.
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
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?
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)
As you see I am using menu because it looks little bit nicer
Thanks a lot and sorry for my English, try to survive!
Sami
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?
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)
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>
Sami
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.
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
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
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.
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?
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
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.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?
http://img441.imageshack.us/img441/4162 ... 3at104.png
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 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
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>
Sami
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.
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
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests