I got this project where the footer is absolute positioned to the bottom. It looks nice but if I load a page where angular is about to inject some long content the div initially renders at the bottom of my screen then the content is injected and the div remains there even though the page got a lot bigger.
This question is more towards the angular community, I probably can hack it with javascript to recompile the layout somehow but I'm just wondering if there are other possible solutions out there.
You might want to have a look at ngCloak, and tag your footer with it while the injected content loads.
http://docs.angularjs.org/api/ng.directive:ngCloak
Related
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!
I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.
This issue must be similar to other reported problems involving SVG patterns referenced by url(#fill-ID). I have tried many of the suggestions found here including setting <base> and html5mode, using a directive, $location.absUrl() and so on.
In my situation, I have an SVG that is created using ng-repeat on an array. I want to pop this SVG into a modal using the same controller and template. All is good until the modal is closed. At that point the fills and other SVG elements that are added, the url() attributes fail.
I have created this plunk Angular with SVG and Modal. Differences between the plunk and my code are that the partial svg.html is located in a sub-directory off the root.
My application and plunk work just fine in Firefox and IE11, but in Chrome, the url(#) does not resolve and hence the fills are blank.
It seems like I am Alice chasing a rabbit down the rabbit hole.
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"