Can you give me the key/values which fix an overlayPanel position? I want to fix it in the middle, but I can't figure it out. I have this example:
<p:overlayPanel id="overlayPanelSearch" for="searchButton" my="top" at="bottom">
This is how I understand it.
"my" is the overlay panel box.
"at" is the commandButton.
<p:commandButton id="chartBtn" type="button" />
<p:overlayPanel id="chartPanel" for="chartBtn" my="right top" at="right bottom">
...
</p:overlayPanel>
So the above reads: "Connect the right top of the overlay panel with the right bottom of the command button"
Use the following attributes of overlayPanel:
for - Identifier of the target component to show the panel
my - Position of the panel relative to the target (ex: my="left top")
at - Position of the target relative to the panel (ex: at="left bottom")
I think the documentation was false to describe how to use it.
It was described to use something like 'top left'.
Try to use my="left top" at="left bottom" and it works fine!
Hope this can help you..
To move it to the middle simply use middle.
Even though the documentation just mentions right, left, top, middle you can in addition use middle on the x-axis and the y-axis.
Example:
<p:overlayPanel id="overlay" my="center top" at="right center">
This feature might have been added later on because of this request:
https://forum.primefaces.org/viewtopic.php?t=45084
Related
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I use PrimeFaces 6 and want to position the dialog on top:
options.put("position", "top");
However this does not work. Is there any way to center the dialog on top?
I am quite desperate now
As per Primefaces User Guide 6.0
Position
By default dialog is positioned at center of the viewport and position option is used to change the
location of the dialog. Possible values are;
• Single string value like ‘center’, ‘left’, ‘right’, ‘top’, ‘bottom’ representing the position within
viewport.
• Comma separated x and y coordinate values like 200, 500
• Comma separated position values like ‘top’,‘right’. (Use single quotes when using a combination)
Some examples are described below;
<p:dialog position="top" ...>
<p:dialog position="left,top" ...>
<p:dialog position="200,50" ...>
I know, you would like to set position to primefaces external dialog(dialog framework).
You cannot style or css to dialog because which is wrap by ifram.
But, it is OK to apply css to generated div. This div id is formId + commendLinkId or commendButtonId + _dlg
Example
<h:form id="myForm">
<p:commandButton id="myDialgoBtm" value="Select" action="...." immediate="true">
<p:ajax ..../>
</p:commandButton>
</h:form>
Client/Brower Source
<div id="myForm:myDialogBtn_dlg" ..>
<div ....>
//this is bor title bar of dialog
</div>
<div ....>
//this is bor content of dialog
<ifarm ....>
//here your external dialog page
</ifarm>
</div>
</div>
if so, the id of div will be myForm:myDialogBtn_dlg. You can inspect in browser.
Example CSS for your dialog
#myForm\:myDialogBtn_dlg {
top: 0px!important
}
I don't think, it will be better solution, Currently, I solve this issue by above way.
I was finding the solution, but the only way that I found it was this:
.ui-dialog {
top: 100px !important;
}
I put this code below of
I've implemented a p:commandButton to update the contents of a table when it is clicked. I think this is working (although It isn't properly tested) but the more immediate issue is as follows.
Bug
Before the request, the title bar looks like this:
And after I hit the refresh button on the right, the page re-renders as follows:
Attempts to solve
The following is the current code for my p:commandButton:
<p>
<p:commandButton oncomplete="eventFeedsDialog.show()" update=":eventFeedsForm" id="feedsRefresh" icon="ui-icon-refresh" title="Refresh page" style="height:40px; width:40px; float:right;">
<f:setPropertyActionListener value="#{true}" target="#{searchBean.refresh}"/>
</p:commandButton>
</p>
The eventFeedsDialog is the p:dialog element that this button is wrapped in, which is further wrapped in a h:form element. Here is the declaration of the eventFeedsDialog element:
<p:dialog id="eventFeedsDialog" header="Feeds" widgetVar="eventFeedsDialog" resizable="false" width="1000"
styleClass="dialog">
I've tried changing the oncomplete attribute to point at the h:form instead of the dialog, but it appears not to have worked. I thought up a hack, whereby I append a mountain of spaces in the header attribute, but that is horrendously ugly.
I've not found anything on google like this, so I was wondering if you guys have any ideas?
I need to have primefaces galleria without the film strip at the bottom. When I used showFilmstrip="false", there is no way to navigate manually. Even adding autoPlay="true" does not make the contents to move.
<p:galleria id="gal" value="#{articleController.welcomes}" var="w" autoPlay="true" showFilmstrip="false" >
<h:outputLabel value="#{w.sinhalaTopic}" ></h:outputLabel>
</p:galleria>
Is there any way to have a gallaria without film strip at the bottom, yet enable to navigate with the arrows on either sides? If that is not possible, is there any other similar primefaces component to be used instead?
.ui-galleria-filmstrip-wrapper {
display:none;
}
Add upper code into your .css file, this will make the strip hidden at the bottom of p:galleria.
I would like to have both the "email me" button on the same line as the "skype" button. I am new to HTML so go easy on me.
The code is
<!-- emailme Button BEGIN -->
<div id="emailme_div1"></div>
<script>var emailme_id=4714;</script>
<script type="text/javascript" src="http://static.emailmebutton.com/emailme.js"></script>
<!-- emailme Button END -->
<!--Skype 'Skype Me™!' button Begin-->
<img src="http://mystatus.skype.com/bigclassic/grapplerulrich" style="border: none;" width="182" height="44" alt="My status" />
<!--Skype 'Skype Me™!' button End-->
You have to position them relative and use "float:left" to get them next to eachother.
The best way is to put both buttons inside a "container" and then asign both buttons position:relative and float:left
Here you go: http://jsfiddle.net/cLEFW/
I've wrapped a div around youre skype script, and added the position:relative and the float:left. In fact, you dont even need to use position:relative, but well... I've done it anyway xD
You should float each button.
Give them a set width to space them apart properly.
Add some margin-top to the first button to line them up vertically.
#emailme_div1{float:left; width:150px; margin-top:9px;}
#skype{float:left;width:150px;}
http://jsfiddle.net/jasongennaro/mn8EZ/
Note: this requires adding an id to the skype a href.
BTW: you will need to clear the floats for any content underneath.