I need to hide content of <ui-view></ui-view> when it render (including images). What is the easiest way for it in Angular 1.5 and jQuery?
Cool if it will without vendor moudules.
This may answer your question: https://stackoverflow.com/a/13276214/5954939.
Summary - ng-cloak attribute will hide rendered elements (by applying relevant CSS).
You can play with css like this:
[ui-view].ng-enter, [ui-view].ng-leave {
transition: z-index .5s; }
[ui-view].ng-enter, [ui-view].ng-leave-active {
z-index: 0; }
[ui-view].ng-leave, [ui-view].ng-enter-active {
z-index: 1; }
As an option, you can change z-index with opacity.
In my application I've used angular bootstrap $modal to open a modal dialog. I've modified the styles given by the bootstrap to apply some transition to my modal dialog, but as I continue further in my application development we got the need to bring more modal windows, but we don't want to apply this transition to all the modal dialog. How can I do this. Apart from these styles I already have individual styles for each of the modals based on it's position on the screen and size of the modal window, for this I' using windowClass: modalOptions.winClass property of the $modal.open method.
.modal.fade .modal-dialog {
perspective: 800px;
perspective-origin: 50% 100px;
transition: transform .10s ease-in-out;
-ms-transform:rotateY(180deg);
}
.modal.in .modal-dialog {
-ms-transform:rotateY(360deg);
}
I'm trying to make animated transitions when swapping two divs using ng-show and ng-hide on both. This is currently my code:
<div ng-show="loginToggler === 'register'">
Register
</div>
<div ng-show="loginToggler === 'login'">
Login
</div>
My css partial for animating :
.ng-hide-add { animation:0.5s lightSpeedOut ease; }
.ng-hide-remove { animation:0.5s lightSpeedIn ease; }
Animations are working properly only when the first div is appearing/disappearing. None of suitable transition effects apply on my second div (it works the same way when I swap my divs position in code - only the one which is earlier in my code has the transition effects applied).
Tried with the second div such as ng-hide="loginToggler === 'register'" ? that way both of them will have .ng-hide at the same time when transitioning
I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like .show-for-small-only as Foundation applies
display: inherit !important;
to any element which uses these visibility classes. (For example, see line 5808)...
.show-for-small-only {
display:inherit !important;
}
This is causing me issues. Say have an element that I want to .show-for-small-only:
<div class="someElem show-for-small-only">
<!-- Content -->
</div>
Yet I want this element, when shown, to be formatted as a display:inline-block element. Due to Foundation's use of !important, the div is forced to assume it's default display state of block.
Is there any workaround to this, short of declaring my styling as !important too? (I don't want to have to do that though)...
I agree, using !important always feels gross.
Precedence in CSS is given to the element furthest down the tree so to override the Foundation !important property, just target an element further down the tree, like so:
<div class="show-for-small-only">
<div class="someElm">
<!-- your content here -->
</div>
</div>
With the following CSS
.someElm {
display: inline-block;
}
Here's a Plunker for kicks (just remember the items wont show up unless the screen is small).
I hope this helps.
To overwrite inportant just declare it again after the first declaration
.show-for-small-only {
display:inherit !important;
}
.show-for-small-only {
display: inline-block!important;
}
<div class="someElem show-for-small-only">
Content
</div>
I am using Angular UI Bootstrap Modal box. When the modal opens the body has a scroll. When I scroll the content behind the modal also scrolls.
I can set overflow: hidden to the body tag and this solves the issue. However if I have alot of content within my modal I need a scroll to show. This scroll should not be inside the modal i.e When I use the page scroll the modal should only scroll and not the content. Plunker here
A slight modification of dreamhigh's answer which worked well for me included adding position: fixed for iOS devices:
body.modal-open {
position: fixed;
overflow: hidden;
}
Furthermore adjusting the viewport to disable user scaling to keep inputs from automatically zooming and introducing scroll bars on the body content:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Credit to this post:
Bootstrap 3: horizontal scrollbar on iPhone after form focus
With these two changes I was able to get angularjs modal forms to behave well on iOS.
I'm facing the very same problem actually, using UI Bootstrap, and came up with kind of a workaround. On opening the modal, you add a class (.ovh) to the body, that sets overflow to hidden. On closing/dismissing the modal, you remove that class, so that scrolling is possible again.
See my fork of your fiddle here: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview
Note that I've placed the class in the index.html, just for demonstration purposes. Besides I injected $document in the controller definition, to use the reference provided by angular.
For those using Angular JS and the UI Bootstrap. Here is what it took for me to get it to work. My situation was a bit different. I had a Modal that worked and scrolled great. I then had a button on that modal that would pop another modal. Once that second modal was closed, the initial modal would no longer scroll. This is all it took:
.modal.in {
overflow-x: hidden;
overflow-y: auto;
}
I just put below CSS and now the body scroll is hidden whenever modal popup is opened. I am using Angular UI Bootstrap.
.modal-open {
overflow: hidden !important;
position: relative
}
When you add overflow:hidden, the background page scroll is hidden. However, the modal scroll will be visible as the page scroll and the modal will be set to scroll.
body.modal-open {
overflow: hidden;
}
In bootstrap js commmented line causes the problem, you can comment this line as i do.
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}
that.$element
.show()
.scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
//that.enforceFocus()
For me the page scrolled when the dialog was being closed, so I fixed the ui-bootstrap-tpls.js file. The actual problem is that when dismissing the modal, removeModalWindow is being called with parameters 'modalInstance' and 'modalWindow.value.modalOpener'.
The second parameter is being used to focus on the element which triggered the modal window. Just remove the second parameter in the 'dismiss' and 'close function' and your page scroll effect will be solved.
'removeModalWindow(modalInstance, modalWindow.value.modalOpener)' becomes 'removeModalWindow(modalInstance)'
I fixed this problem, with adding this code in global style:
.modal-open .modal {
overflow: hidden;
}
.modal-open{
height: 100vh;
}
you can do this, and you haven't scroll on modal open.