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);
}
Related
I'm building a website with ReactJS. On my page, I have a content section as well as a sidebar.
When I click on a button the sidebar should be toggled. At this moment, I'm changing the class of the content from col-md-9 to col-md-12 from bootstrap and set the attribute hidden to the sidebar.
But now, I want to add some transitions like fade in and fade out the sidebar and increase the size of the content. I have no idea how I can add these transitions because I'm changing the classes.
Can you tell me what I have to do?
You can use CSS. Take a look at animate.css
https://daneden.github.io/animate.css/
You can use css transition by changing classes. Here is example of two clsses that will do fade animation:
.fade-in {
opacity: 0;
transition: opacity 400ms;
}
.fade-out {
opacity: 1;
transition: opacity 400ms;
}
However it wouldn't work along with hidden Bootstrap class name, because it sets display attribute to none value. TO make it work you can use fade-in class name instead of hidden and fade-out, when side nav should become visible
I have a simple form that is inside Angular UI Bootstrap's tabs. Form controls have tooltips associated with them to show errors. I'm using custom event that will toggle tooltip visibility.
The idea is to have tooltip visible on required fields.
With UI-Bootstrap version 1.3.2 and Angular 1.4.8 everything is working fine but since I upgraded to Angular 1.5.3 tooltip is not showing anymore. It will show once I actually type something in the text field and delete it which makes me believe that now requires the model to be initialized.
I have here two plunks that will show exactly what is going on:
Working plunk (with angular 1.4.8) - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh
<data-uib-tabset>
<data-uib-tab>
<data-uib-tab-heading>Tab 1</data-uib-tab-heading>
<form name="testform">
<input type="text" name="test" id="test"
data-ng-model="test"
data-ng-required="1"
data-tooltip-append-to-body="true"
data-tooltip-placement="right"
data-uib-tooltip="Required!"
data-tooltip-trigger="none"
data-tooltip-is-open="testform.test.$error.required" />
</form>
</data-uib-tab>
<data-uib-tab>
<data-uib-tab-heading>Tab 2</data-uib-tab-heading>
Content 2
</data-uib-tab>
</data-uib-tabset>
Not so working plunk (with angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ
I noticed as mentioned in the comments that there is a class being attached - uib-position-measure. It has 3 styles that are causing the issue:
top: -9999px !important
left: -9999px !important
visibility: hidden !important
EDIT - I'm reorganizing my post now that I've dug pretty deep into this. Still don't think I have a great solution, but at least have some info and options.
Solution 1
Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on .tooltip.
Plunker
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,'');
}
.tooltip {
top: 42px;
left: 150px;
}
Solution 2
Overwrite the styling that is causing the issue with javascript.
Plunker
<script type="text/javascript">
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;");
}
</script>
Solution 3
I was able to find where the .uib-position-measure class is created in the ui-bootstrap.js file. I removed !important from the visibility, top and left. After that I was able to fix the issue using css on the .tooltip class.
Plunker
ui-bootstrap.js is the file I created, copied the original over, and modified the uib-position-measure class - it is at the bottom on line 7327.
In style.css I simply added the below:
.tooltip {
visibility: visible;
top: 42px;
left: 150px;
}
Related Issue
I was also able to find an issue on GitHub related to this - https://github.com/angular-ui/bootstrap/pull/5530
Someone removed some inline styles and added them as a class, so that they could be overwritten by CSS instead of using javascript. This may be the best way to handle it - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154. The problem is finding the location of the uib-position-measure inline styling and handling it the same way.
Using popover-popup-delay repositions the element and the class uib-position-measure is no longer active on it.
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.
I have an AngularJS 1.2.2 web application with a <div> that I show/hide based on some $scope property. Using the ngAnimate module, I animate the showing and hiding of the <div>.
<div id="square" ng-show="showSquare" class="animate-shiny"></div>
I also have a class I want to place on this <div> and for this I use ngClass.
<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>
And as it so happens, sometimes that class gets applied at the same moment as when the <div> is shown/hidden. This causes the show/hide animation to not work anymore, apparantly it finds ngClass more interesting to animate, even though I don't want to use ngAnimate for that animation.
Here's a Plnkr that demonstrates the behavior. Clicking the show/hide button works great, clicking the make cool button works great, but the button that combines these two causes the show/hide animation to break.
How do I fix this? And can I do it without manually addressing $animate?
Thanks in advance!
The problem is that you are trying to animate using the class and not discriminate between when things should animate. That is, your transition effect applies to the class in general, which ng-animate perceives as having to do work whenever that class is referenced. I modified your css a bit to get pretty close, if not exactly, what you want:
#square {
width: 50px;
height: 50px;
background-color: blue;
transition: 0.4s all ease-out;
}
#square.cool {
box-shadow: 0 0 10px 3px green;
background-color: lightgreen;
}
#square.ng-hide-add, #square.ng-hide-remove
{
display: block !important;
}
#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
margin-left: -80px;
opacity: 0;
}
#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
margin-left: 0;
opacity: 1;
}
Here is the new plunkr so you can play with it: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview
If you want to ONLY animate the show/hide and do not want a transition for the color, simply move the transition to the #square.ng-hide-add, #square.ng-hide-remove declaration.
I am trying to do a module with a datepicker inside an accordion.
problem is the datepicker popup box is not visible over the accordion.
here is a plunker showing the problem :
http://plnkr.co/edit/jBqU0LXQFcUuzQLency2?p=preview
any idea on how i could make the dialog window appear over the accordion module ?
edit: with bootstrap 3, this is working :
.panel-group .panel {
overflow: inherit;
}
Add this css after the bootstrap.css link can fix it. This will override the CSS relating to position for each accordion-body.
<style type="text/css">
.collapse {
position: inherit;
}
</style>
This works for me Bootstrap version 3:
.panel-body {
overflow: inherit !important;
}
my datepicker is in an accordion that is in a bootbox.