I'm having some problems with panelPopup and IE8. When I set autoCentre="true" and positionOnLoadOnly="true", I expect the popup to appear in the center of the view port and stay put there. This works fine in Safari, Chrome and Firefox, but in IE the popup "follows the scroll", if you see what I mean. I.e if the page where the popup is displayed is longer than the popup the popup is re-centered when I scroll the page. Also, and this is a bigger issue - if the popup is longer than the page I can only scroll part of the way down it, then it's re-centered. This means I can never see the information at the bottom of the popup...
This is the code used to generate the popup:
<ice:panelPopup
id="popup"
positionOnLoadOnly="true"
autoCentre="true"
style="z-index:999; background: #FFFFFF;"
resizable="false"
draggable="false"
modal="true"
clientOnly="true"
visible="#{SomeBean.popupRendered}" >
Any ideas?
Thanks!
According to the documentation, the autoCentre option is supposed to keep it centered through scrolling and window resizing but dragging should disable it. Turning draggable to true might give you reasonable results because the user can drag it to a position they can see the entire popup.
Related
The animation when tapping the hamburger menu is working perfectly (though the css positioning is off, and needs to be fixed). But when the user taps one of the links in the nav (whether it is a new page or the page they are on), I want the animation in reverse (with either the current page or the new page, depending upon which link they press)
Code in CodeSandbox
Any ideas on the one, or probably many things I am doing wrong?
I'm configuring a picture upload button on a form. I have a green bootstrap button I am happy with, but Chrome still gives me a default, grey, pic upload button.
You can see the grey button underneath the green "Upload Project Picture" button.
I have searched my code, but can't find any way to hide it. My colleague (who is fairly experienced), has no idea either. Thanks if you can help.
I found this question, but am not sure if it's exactly the same issue:
How can I hide a button if JavaScript is disabled?
I think the best approach is to position the native element absolutely, and then move it far to the left of the viewable screen. You can then make your fancy custom submit button "be" the actual submit via javascript. Sounds hacky, but a similar solution is recommended by no less than Mozilla.
input[type=file] {
/* original submit tag pushed outside the viewport */
position: absolute;
left: -1000em;
}
I have a long form, and the client have to scroll vertically the screen to see all fields.
But, every time one of those components with the property update=#form is fired, the screen get back to the top position.
So, the question is:
There is a way to keep the scroll bar in the same position after an update=#form ?
Important: The scroll bar back to the top only in the first update=#form, after that, the screen keeps the current position.
I am not sure if it's a bug or I am doing something wrong that is causing that behavior.
And yes, i really have to update the whole form
e.g.
<p:commandButton id="btnVerifyLogin" update="#form" value="Verify"
actionListener="#{demandController.VerifyLogin()} />
I had this issue before, where I had to update the whole form.
What I have learned that when I update the form containing the button that has been pressed (like your Verify button), the browser somehow loses the focus on that button and just scroll back to the top.
I came up with a workaround.
<p:commandButton id="btnVerifyLogin"
update="#(form :not(#formId\\:btnVerifyLogin))"
value="Verify"
actionListener="#{demandController.VerifyLogin()} />
Basically I update the form but not the button, this way the browser keeps the scroll as it is.
Others would suggest that onstart we can call var scroll = $(window).scrollTop(); in order to preserve our scroll position, and oncomplete we call $("html").scrollTop(scroll);, but this won't work since the oncomplete won't be triggered since the button is updated inside the form!
Again this will work only with Primefaces 4, and recently I avoid updating full forms, I prefer to use selectors.
Hope this helps.
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/
Browse to a webpage with hyperlinks using IE (I am using IE7) Once on the page, enlarge the fonts using ctl + mouse wheel. Now when you try to hover over the hyperlinks, they are laterally displaced to the right. To click on the link, i have to move the mouse to the right till the cursor turns into a hand.
Anyone has a comment on this??
I was browsing the following page.
It is the 2nd hyperlink in the body of the article. (the link text is "here")
IE7 doesn't handle Zoom correctly, You can see this error on this page (I mean the page you're reading right now) if you zoom large enough, view the logout | about link at the top, hover over it, hover off to the right, back over.
All of the links on that page are displaced to the right on my copy of IE7 (7.0.6001.18000) even before I enlarge or shrink the fonts. Whereas other pages act normally. (My test page was http://www.frito-lay.com/fl/flstore/cgi-bin/good_questions.htm).
It appears to be something specific to the page.