Doing some application in JSF PrimeFaces 3.1.1 (still learning) and I implemented full page layout - Sunny (the <p:layout /> tag). Everytihng is fine, except my menu bar.
On hover on the submenu button in the menu, the dropdown submenu shows, but when I want to go by mouse to the submenu, it disappears. The only option is to change the mouse position to the submenu very fast - than it stays. And thats the problem, need it to work normally, not dissappearing.
If I put the layouts out, the menubar works well again. Also tried to copy & paste code from PF showcase, issue was the same.
Using JSF 2 on Tomcat 7.0.22.0. Here is something of my code...
The menubar in a template:
<p:layoutUnit position="north" size="130">
<ui:insert name="top">
<p:menubar id="mainMenu" model="#{menu.mainMenu}" />
</ui:insert>
</p:layoutUnit>
The CSS solving overflow problems:
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
.ui-layout-north {
z-index: 30 !important;
overflow: visible !important;
}
Thanks for help!
Did you happen to set a custom font size for your ui-widget? Personally, I had the following CSS setting:
.ui-widget {
font-size: 12px !important;
}
and I experienced similar issue like yours in Firefox (but not in Chrome). Oddly enough, after increasing font-size to 13px the problem was fixed.
The menubar works in IE or Chrome but in firefox don't show correctly you can see that in Check this with firefox a see what happen :)
I solve this problem with
.ui-menubar .ui-menuitem-text {
font-size: 13px!important; top: -1px;
}
This is not ideal but it solved the problem for me:
.ui-menuitem-link
{
max-width: 180px;
}
Please view next link http://forum.primefaces.org/viewtopic.php?f=3&t=16597.
It's a matter of font with.
This appear also in Firefox 27 and Prime Faces 4.0 RC.
In other browsers works well.
Related
How can I hide this alert in my beanedit form. It's really annoying.
I tried with this css code but it didn't work.
.alert-dismissable .alert .alert-danger{
display: none !important;
}
I fixed it.
In my css file I added
.bean > .alert{
display: none !important;
}
After that I just added the class bean to the form.
Thats it no more alerts.
I'm using a PrimeFace Dialog in JSF. The problem is that a PrimeFaces dialogs header is gray in color and my client thinks it similar to an inactive object because the windows uses gray to indicate that something is inactive.
So is there any way to style the Header background color of a PrimeFace dialog?
The code of a PrimeFace Dialog:
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
Primefaces has support for overriding styles using css. For p:dialog and at least since Primefaces 3.5, the following style options are available:
.ui-dialog - Container element of dialog
.ui-dialog-titlebar - Title bar
.ui-dialog-title-dialog - Header text
.ui-dialog-titlebar-close - Close icon
.ui-dialog-content Dialog - body
Just override the default style with your own css.
If you are using an older release (3.5), find the documentation for your version here.
Try the below process,
First step: declare styleclass for p:dialog as "overlayDialog".
And, In css file,
.overlayDialog div.ui-dialog-titlebar{background....}
Right click on your dialog and 'Inspect Element' (in Chrome, can use Firebug or eq.) and find the class of your dialog, should be something similar to .ui-dialog .ui-dialog-titlebar.
Then just style that in your CSS how you like.
I have a <p:menubar> in a xhtml template. The div that surrounds it has these CSS properties:
position: fixed;
top: 44px;
width: 100%;
So I can fix the menu header while user scrolls down the page.
The problem now is that some Prime Faces component have icons and headers overflowing the menu.
I tried to work with z-index but no success. I imagine that there is another solution in PrimeFaces instead of z-index.
Thanks a lot.
According to the PrimeFaces default style sheet primefaces.css, the <p:message(s)> icon is relatively positioned.
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
background: url("/omnifaces/javax.faces.resource/messages/messages.png.xhtml?ln=primefaces") no-repeat;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
}
I'm in first place not sure why it's relatively positioned as it doesn't seem to need to be offsetted nor have any absolutely positioned children. Perhaps it's been used as some (most likely IE-specific) workaround/hack for something else (if this was "has layout" related, the developer would better have used overflow: hidden instead for this). So just making it the default position: static should fix it.
Add the following to your override stylesheet to achieve this:
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
position: static;
}
Alternatively, you could of course also set z-index of the menu with an insane high value, as you figured out yourself. I wouldn't consider this a reliable solution though, this is too much a workaround/hack.
Resolved it by setting the z-index: 9999999 to the <p:outputPanel> sorrounding the menu instead of setting the style property in the menu.
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
<h:outputLink id="lnk" value="#">
<p:printer target="tbl" />
<p:graphicImage value="http://www.primefaces.org/showcase/images/print.png" />
</h:outputLink>
I didn't find any suitable attribute in the <p:printer> tag.
Update: sorry, nevermind the <p:printer> can be used on a <h:dataTable> as well, so you can also just answer the second question only.
Both qustions are answered with CSS #media print rule. It allows you to specify CSS styles which are specific to printed output. You can embed those rules in a normal CSS stylesheet file or <style> element the usual way.
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Lookup the classname of the <p:dataTable> and override it in your #media rule:
#media print {
.primeFaces-dataTable-className {
border: 0;
margin: 0;
padding: 0;
background: none;
color: black;
}
}
There are likely more, I don't know it all from top of head, you should be able to check using Firebug or Chrome developer tools what classname is been used and which properties are all been set so that you know which you should reset to 0, none or some other default.
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
Use CSS.
As per CSS 2.1, you can specify it as follows:
#media print {
#page {
size: landscape;
}
}
This has however browser specific impediments, it's not supported in FF and in MSIE <=7. For workarounds, check the accepted answer of this question: Landscape printing from HTML
There are a few ways out there in the internet to centre something on the screen via css (-ve margins, table-cell hack etc). I was quite happy with that until now when I wanted to use native gwt2.0 layout panels/widgets. Imagine you want to do a "loading screen" to show a spinning circle until the app tries to figure out where to send user next (in background the app is checking if user is logged in or not).
I have this code in gwt uiBinder xml:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field='res' type='ru.atamur.resources.CommonBundle'/>
<g:HTMLPanel>
<g:Image resource='{res.loader}'/>
</g:HTMLPanel>
</ui:UiBinder>
I basically want the image to be displayed in the center of the screen both vertically and horizontally.
Any bright ideas how to achieve that w/o scripting getWidth/setHeight etc?
Thanks.
In the end I was able to use general css with the help of HTMLPanel:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field='res' type='ru.atamur.resources.CommonBundle'/>
<g:HTMLPanel>
<div class="{res.centerStyle.container}">
<p class="{res.centerStyle.centered}">
<g:Image resource='{res.loader}'/>
</p>
</div>
</g:HTMLPanel>
</ui:UiBinder>
where corresponding css (linked via a bundle) is:
.container {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
display: table
}
.centered {
display: table-cell;
vertical-align: middle;
text-align: center;
}
the only hint here was to call ensureInjected in the corresponding widget constructor (see http://code.google.com/p/google-web-toolkit/issues/detail?id=4408 for details):
#UiField CommonBundle res;
public LoadingScreen() {
initWidget(uiBinder.createAndBindUi(this));
res.centerStyle().ensureInjected();
}
I'm not sure why you're against scripting to achieve this, especially since you're going to need at least some amount of scripting in order to show and hide the loader at the right times. You may find your solution isn't going to work well across browsers.
GWT has the PopupPanel, which makes what you're trying to do quite simple.
// A popup that doesn't auto-hide, and doesn't let the
// user click on anything else.
PopupPanel popup = new PopupPanel(false,true);
popup.setGlassEnabled(); // Dims the rest of the page
popup.setWidget(new Image(res.loader()));
popup.center(); // Show popup centered
Then you just call popup.hide() when you're done.
Centering items can also be done using UIBinder without CSS:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>