I have a div element that I only want to be show when my list of items empty. So I put in the following(in haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Any ideas what I am doing wrong?
You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.
This should be all you need to do:
<div ng-hide="items.length" ng-cloak>no items</div>
Sample fiddle.
None of the solutions worked for me. The only solution I found is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
There's currently an open issue for this:
https://github.com/angular/angular.js/issues/14015
This workaround worked for me:
.ng-hide.ng-hide-animate {
display: none !important;
}
Related
I used seiyria angular-bootstrap-slider for range slider,but initially when page loads the tooltip is at wrong position.when it is placed in normal page it is working fine,but in modal it is intially at wrong position,but when I click it will be set.So how to slove this issue.
HTMl:
<button class="btn btn-default" value="modal"
onclick="confirmChangeMaxHours();"><i
class="glyphicon glyphicon-cog"></i> Adjust Value
Here is the link:
Codepen
I found this suggestion in some site:
setTimeout(function() {
slider.slider("relayout");
}, 500);
But,where I have to give setTimeout function,I tried to give but it is showing error like Slider is not defined.
Thanks in Advance.
add this css into your code
.tooltip{
margin-left:-32px!important
}
In my implementation the modal was over the tooltip. So, to fix it, I put the tooltip over all elements by adding a big z-index to all tooltips.
.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
z-index: 100000;
}
I have an AngularJS app which works fine in Chrome but when using Firefox it takes a few seconds before it renders it as it should. Firefox shows the {{variables}} and everything inside ng-hides for a few seconds.
The website is http://diegorbaquero.com/bTorrent/ and it works completely fine in Chrome, but Firefox has this delay.
Thank you
I had the same problem, i use ng-bind and ng-cloak to overcome the problem of {{variables}}.
In my case i use ng-bind for href tag.
and ng-cloak for li
<li ng-if='current_user'><a ng-href="#/profile" class="ng-cloak">{{current_user.first_name}}}} {{current_user.last_name}}</a></li>
You can use the class ng-cloak to hide your app until after Angular loads.
1: You can use ng-cloak. Include this in your css:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
html:
<div ng-cloak>{{name}}</div>
2: Or, You can use ngbind
<div ng-bind="name"></div>
I want to hide a text message while the js is loading and data binding is not yet applied. I have tried something like this but its always hiding the message
.hide { display: none; }
<div class="hide" ng-hide="haveRecords">No Records found</div>
If I remove the class hide from div. then this element is shown for some milli-seconds before the data binding is applied. How to fix it?
This is what ngCloak is for.
You can use it like this:
<head>
...
<style>[ng-cloak] {display: none !important;}</style>
</head>
<body>
...
<div ng-cloak ng-hide="haveRecords">No Records found</div>
NOTE: The style in the head is only required if you include the AngularJS script at the end of body (which is a good idea anyway).
You should use ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
Code
<div ng-hide="haveRecords" ng-cloak>No Records found</div>
Here is a jsfiddle demonstrating the following issue.
I'm using Foundation 5 framework and trying to include an Orbit Slider inside of a Reveal Modal, however for some reason the slider is not given an appropriate height.
<-- Button to Reveal Modal -->
Click For Modal
<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
<ul data-orbit>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
</ul>
</div>
Note that if you resize your browser window with the modal open, it automatically corrects itself to the appropriate height. This issue existed in previous versions of Foundation, so hacky fixes popped up like this:
$('.reveal-modal').on('opened', function(){
$(this).find('[data-orbit]').css('height','');
$(window).trigger('resize.fndtn.orbit');
});
However this fix no longer works in the newest version of Foundation. Is there any way to get it working?
Note that I don't want to simply assign a min-height css attribute as the content in my slider will be of variable height, not to mention responsive so a pixel value wouldn't work.
In short I believe this is the answer:
$(document).foundation();
$('.reveal-modal').on('opened', function(){
$(window).trigger('resize');
});
OR
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
$(window).trigger('resize');
});
I looked at the following references:
Foundation 4.1.2: Orbit slider not shown in Reveal window
The one you listed as "hacky fixes" above
Squashed picture when using Orbit in a Reveal
Orbit height not set on accordion.
It looks like the old hack for 4.1.2 just called the compute_dimension method to resize the modal once it was opened. I looked in the foundation.orbit.js file and found $(window).on('resize', self.compute_dimensions);, around line 280.
Instead of $(window).trigger('resize.fndtn.orbit'); I used $(window).trigger('resize'); and removed the line $(this).find('[data-orbit]').css('height','');.
I forked your jsfiddle and added the changes here.
I hope that helps.
For anyone using Foundation 6 (my legacy project was on 6.2.4), i fixed this by adding the following css code:
div.gallery-in-modal .orbit-container {
height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
max-height: initial !important;
}
Here's my problem, I have a piece of jquery that works fine in modern browsers, but won't work in IE7.
The idea is when you click on one of the < A > tags, the div called "innerdetails" will open.
Here's my HTML:
<ul class="table">
<li>CLICK HERE</li>
<li>Techniques </li>
<li >3</li>
<div class="innerdetails">
Technical services, including MARC.
</div>
</ul>
Here's the offending Jquery code.
$(document).ready(function() {
$("ul.table li a").click(function() {
$(this).parent("li").parent("ul").children(".innerdetails").toggle();
alert ( $(this).parent("li").parent("ul").children(".innerdetails").length )
return false;
});
});
The interesting thing is that in the alert, IE7 returns "0" as length for .children(".inner-course-details")
Chrome returns "1"
The issue is likely due to the fact that this isn't valid HTML (a ul tag can't contain a div tag), so IE7 probably doesn't consider it part of the DOM tree.
To fix, try putting the div inside of an li tag (or just using an li tag instead), then .toggle()ing the li.
I don't know exactly why but if you change the children to find it works
$("ul.table li a").click(function() {
$(this).parent("li").parent("ul").find(".innerdetails").toggle();
alert ( $(this).parent("li").parent("ul").find(".innerdetails").length )
return false;
});
And the jsfiddle http://jsfiddle.net/6heVt/2/