PrimeFaces overlayPanel outside its container - jsf

I'm trying to display an OverlayPanel into a Carousel, but this panel is wider than the Carousel, so its contents are not completely shown.
I've tried adding a z-index style value to the panel, but it still stays "inside" the Carousel.
Is there any way to show it completely, by drawing its overflow outside the Carousel?

According to the documentation from primefaces OverLayPanel Documentation www.primefaces.org/docs/vdl/3.4/primefaces-p/overlayPanel.html you should use
appendToBody="true"
The overlay panel with it should do the trick.

Related

How do I style my XPages InputTextarea so it shows full height dependent on content? (in both edit and read mode)

I've got a simple inputTextarea contained in a xp:table. I want to display it all opened up, and not have a scroller on the right. style="width:100%; height:auto" doesn't seem to do anything.
Anyone?
The best route here is to use the Dojo Textarea control, xe:djTextarea - it does just what you're describing.

SelectOneButton to SelectOneMenu PrimeFaces

I have a XHTML page using SelectOneButton which presents a list of buttons as label from A to Z (letters) horizontally and continuously without any break or new line. It is working perfectly on computer screen.
But if the same page on smaller screen such as iPhone, the SelectOneButton changes from horizontal to vertical. I believe it is the design from PrimeFaces.
I came up with two options: if the screen provides enough space for all buttons from A to Z, then the page will use SelectOneButton, otherwise the page will use SelectOneMenu (dropbox).
What approach should I use?
Thanks,
Nghia

How to restrict a Primefaces Hotkey to be called only inside a specific div?

I'm using Primefaces 5.1 with JSF. I have some divs that have an add button inside it. I'm wondering if there's a way to set a Primefaces hotkey to be called only when I have the focus in an element that is inside this div (and calls the add function of that button inside the div). Any idea? Thanks!

bgiframe appears in front of jquery modal dialog's overlay in IE6

When I look at jquery ui's demo modal dialog (http://jqueryui.com/demos/dialog/#modal) in IE6 the bgiframe is appearing on top of the background overlay. So instead of seeing a black/gray stripe pattern, there is just a white background covering the page with the word "false" in the upper left corner. Is bgiframe broken with the latest version of jqueryui? Is there a quick way to repair this problem with bgiframe? If not, is there a plugin that hides selects when a modal dialog is shown? The ie6 z-index issue with selects is the reason I was using bgiframe in the first place.
Have you looked at this answer
http://blog.dmbcllc.com/2009/02/19/jquery-bgiframe-and-ie6-z-order-hacks/

YUI modal panel with non-standard background mask value

I am trying to setup a modal YUI panel above a YUI Tabview. For CSS purposes [1] the tabs have a z-index that goes up to about 20 (depending on how many tabs there are).
The problem I am facing is that the mask that YUI draws for the modality of the panel is behind whatever nonzero mask the tabs have, and so the tabs peek through.
So far I have only found YUI API methods to change the mask of the dialog or panel.
Does anyone know how I can do this for the mask? Has anyone had an issue like this before?
I will shortly be posting the code I used.
TIA!
[1] (CSS designer did this, so I can't change the markup)
The solution is
- after show/render of top modal dialog, call hideMask() for underlying modal dialog
- before canceling top modal dialog, call showMask() for underlying modal dialog
Tip: If calling hide/show mask too early and/or too late, mask "flashing" may be experienced visually.
Looks like configuration value zIndex (for the Panel) combined with the stackMask should do it.
Nothing in the docs about whether stackMask should be called before or after rendering, before or after show etc. There is also an event (configzIndex) which fires when the zIndex property is changed.

Resources