This question was previously posted on Primefaces forum where I din't receive any answer.
I'm trying Primefaces 3.1 because I would need the overlay panel functionality.
Unfortunately in my Internet explorer 8 (ie8) the following very simple overlay panel is never displayed, while it works quite fine on Firefox 5.x.
Some points in the html code which seem directly related to the Ie8 problem are the following:
- the page doesn't need a vertical scrollabar (if the page has one the overlay panel is shown)
- the overlayPanel height is fixed.
<h:body>
<div style="height: 300px"></div>
<h:form>
<p:commandLink id="showAllUserList" value="Utenti online" />
<p:overlayPanel for="showAllUserList" my="right bottom" at="right top" dynamic="true"
style="width: 300px; height: 500px; border: 1px solid red; overflow-y: scroll" >
He who rules the skies rules the ground
<br/>
Monti kicks ass
</p:overlayPanel>
</h:form>
</h:body>
If I don't find a workaround soon I would have to implement something myself.
Thanks
Filippo
Put the following Javascript code before closing the h:body Tag.
<script type="text/javascript">
if ( $.browser.msie) {
if(parseInt($.browser.version, 10) === 8){
var overlayPan = $("div.ui-overlaypanel");
$(overlayPan).css('position','fixed');
}
}
</script>
You might try setting appendToBody to true for the overlay panel. This can help in some situations, though to be honest I think your page is simple enough that it wouldn't make a difference.
Check your styles for overflow:hidden (also of the child elements of .ui-overlaypanel), play around giving them overflow:visible - in combination with a fixed size (as you already have) I was able to solve the problem.
Related
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 really feel like this is a therapy because I wouldn't post here if I wasn't seriously struggling. I can't figure out what's going wrong but my menu title and icon seem to start overlapping randomly when I switch views. In addition, sometimes even the main content in the view disappears making the app useless.
I cannot click on the icon once this happens.
Screens:
in my menu.html, I believe this is the relevant part
<ion-side-menu-content drag-content="false">
<ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
<!-- Hamburger Menu Button -->
<ion-nav-buttons side="left">
<button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
<span>toggle menu</span>
</button>
</ion-nav-buttons>
<!-- Settings -->
<ion-nav-buttons side="secondary">
<img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainView">
</ion-nav-view>
</ion-side-menu-content>
I then define the view name in separate template files like so
<ion-view view-title="CMON NOW">
Any advice what might be happening here? I tried copying laborously the same menu code into each view and defining the view there as well through ion-nav-title but the result was the same.
Thanks
The original question was posted on the Ionic forum. Since then, I have removed all but one ion-content elements as I found a similar question with the marked answer saying to not ddefine new ion-content directives inside of my view html, but no luck still.
I had a similar problem with an app I'm developing. The title alignment was initially working on all pages at app launch. I have the title alignment set globally with
$ionicConfigProvider.navBar.alignTitle('center');
Found from the ionic documentation: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
The default value should be centered anyway.
After some long hours trying to figure out this problem I noticed that the title alignment problem always started with one particular page in my app. After visiting this page the title alignment was wrong randomly - not even always happening and happening in random pages of the app. I noticed in the development tools console that I was getting an error in this particular page (with $ionicNavBarDelegate stuff). After fixing this error the title alignment issue was fixed.
So in your case I would make sure there are no other errors in the code itself and this could fix and hopefully fixes your problem.
This is just a long shot and might not be the case in your app but hey, it could help debugging this problem for you and hopefully you get it fixed.
EDIT: Also came across this discussion which might be a cause to the problem and plausible fix.
https://github.com/driftyco/ionic/issues/2881
From the discussion I made a solution which ultimately solved the issue.
$scope.$on('$ionicView.afterEnter', function (event, viewData) {
$timeout(function() {
$ionicNavBarDelegate.align('center');
}, 100);
});
Try it out! Unfortunately this seems to be an angular issue rather than a ionic problem.
SECOND EDIT:
If nothing else helps you can disable the translate3d css attribute which is used to animate in the titles since it seemed that this was sometimes broken in my app. (there could be a better solution to disable the animation but I did not investigate since I was in a hurry with the fix). The css:
.title {
transition-duration: 0ms !important;
transform: translate3d(0px, 0px, 0px) !important;
text-align: center !important;
}
This ultimately solved the problem for me.
Ionic link for doc
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
You can set it using application config
appname.config(function($ionicConfigProvider)
{
$ionicConfigProvider.navBar.alignTitle('center');
});
You can use z-index property, for you button.
.button {
position: relative;
z-index: 9999;
}
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
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?
On my site, I recently found a strange new automatically generated div. when I look at it in development tools in chrome I says:
<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"><embed style="width: 1px; height: 1px;" type="application/x-shockwave-flash" src="http://www.ajaxcdn.org/swf.swf" width="1" height="1" id="_dp_swf_engine" name="_dp_swf_engine" bgcolor="#336699" quality="high" allowscriptaccess="always"></div>
I really don't know what it is, and where it's coming from.
I already had a similar problem and the div came from a chrome extension, check which extension can modify your pages.
Sometimes it will be automatically adding from your web hosting
server
If you are using an external plugins it will be coming from it
I could see you are using google fonts.... Try removing and check your site
You can run your website on a local server...
To hide the DIV, Try adding this css:
<style type="text/css">
dp_swf_engine {
display:none;
}
</style>
Thanks
On the document ready event :
var element = document.getElementById("dp_swf_engine");
document.body.removeChild(element)
if your div is directly in your body element else, find his parent for call removeChildFunction...
I hope that help !