What I have so far:
JSBIN
Try to double click an item, and It'll show a child item. I want to animate it like that. I set the width to 300px(static) just to show you how it works but, I want it to be width:auto (dynamic) but the animation is not working if I set it to auto.
How can I make it dynamic? for example the child div has more than 2 items inside it or no items at all.
It's a bit of a hack but you can use max-width instead of width and just set an upper bound for the resulting max-width.
http://jsbin.com/mibozupe/1/edit
.slides-child{
display: inline-block;
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
max-width: 500px;
}
.slides-child.ng-hide{
opacity: 0;
max-width: 0;
}
Related
I need to show Action buttons to the left on row hover. The below reference have the solution I need but that has the action buttons to the right. I tried changing css but still it doesn't work.
Is there any way I can achieve this thru CSS. Thanks in advance
Reference: ag-Grid - show buttons on row hover like in Gmail
Reference Plunker: https://plnkr.co/edit/X4hCimLy6aL3j4eh?preview
This is the css I used
.ag-pinned-left-header,
.ag-horizontal-left-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-left-cols-container * {
pointer-events: initial;
}
/* Hide border of left-cols-container */
.ag-pinned-left-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
I've had a look through the plnkr and the reason pinning it to left doesn't work, is that the "pinned" property is affecting the className, not actually pinning it to the left, but rather giving it the className of ag-pinned-left-cols-container which is not helpful.
An easy fix is to change the right property to left instead in the css file as shown below. This is line 23-27 in the plnkr. Make sure you're changing the actual css property, and not the right inside the className
Edit:
After a lot of debugging I found the issue with the code.
The reason why it's not working with the pinned: left is because it's being rendered as the left-most column, and everything rendering after it will be above it in the stack. So in practice, when setting it's position to position: absolute !important it was still there, just behind the other columns. Changing it's z-index will resolve the issue. You could tweak the value of the z-index to a smaller one if you want.
After changing the z-index I was able to display both the left and right action buttons. You have to change the z-index in ag-pinned-left-cols-container
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
z-index: 10000000;
pointer-events: none;
}
I have 20 columns in the grid. I want the grid to be split in half, where in the left half I can scroll through the first 10 columns, and in the right half I can scroll through the last 10 columns. In other words, I want there to be two horizontal scrolls in the same Grid. Is it possible?
The functionality you're trying to implement doesn't natively exist in ag-Grid. One solution would be to use pinned columns where you pin 10 columns to the left. The problem would be that you cannot scroll pinned columns, therefore you'll have the add some extra css in order to modify the grid to your needs.
NB. this is VERY hacky solution:
Add the following to your css in order for the pinned columns to be scrollable (change the width from 200px do your desired width):
.ag-pinned-left-cols-container {
min-width: 200px !important;
width: 200px !important;
overflow: auto !important;
}
.ag-horizontal-left-spacer {
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
}
.ag-pinned-left-header{
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
overflow: hidden !important;
}
You'll also need to make sure the pinned column headers scroll along with the pinned columns. For this, you can use an event listener:
document.getElementsByClassName('ag-pinned-left-cols-container')[0].addEventListener("scroll", this.runOnScroll, {passive: true});
runOnScroll = function(evt) {
document.getElementsByClassName('ag-pinned-left-header')[0].scrollTo(evt.srcElement.scrollLeft, 0)
Demo.
For those interested in ViqMontana's solution:
In version 28.1.1 they added a new event-listener which resets any scroll inside the header (commit 12552505). It says this would fix bug "AG-7137", which I can't find out what it was.
It's possible to remove this listener after the grid is ready:
const api = this.gridOptions.api;
api?.ctrlsService.leftHeaderRowContainerCtrl.destroyFunctions[6]?.();
api?.ctrlsService.rightHeaderRowContainerCtrl.destroyFunctions[6]?.();
After this the header scrolls correctly.
When using TypeScript, you will need to cast api to any.
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
As you can see from this jsfiddle:
http://jsfiddle.net/robcampo/pWGuS/
I'm trying to fade out an element and fade another in using Angular animations.
The fading (using opacity and transitions) works. However, as you'll see, it displays the previously hidden element before hiding the current element on display. That leaves you with both elements on display at once.
Question
Is there a way to wait until the first element has been completely hidden before showing the second element? Pretty sure I can do this with a custom directive but before going down that route I'd like to be sure there's no out-of-box way.
What I've tried
a) Put a transition-delay on the element being faded in:
.ng-hide-remove {
-webkit-transition: all 1s ease 1s;
transition: all 1s ease 1s;
opacity: 0;
}
b) Use a height property
This won't work for me because the divs that I'm hiding in my app are part of a grid system.
Note
If I was to implement this in jQuery, it'd be:
elementToFadeOut.fadeOut(1000, function() {
elementToFadeIn.fadeIn(1000);
});
Fixed:
http://jsfiddle.net/robcampo/pWGuS/10/
Used part of Zub's suggestion but also set the height of the container div dynamically so that it doesn't flicker when transitioning.
To achieve this, a directive was created and added to each of the corresponding fading elements (those with ng-show). This directive compares its element's height with that of the parent. If the parent has a lower height, it updates the parent (this prevents flickering):
if (height > parentHeight) {
$(element).parent().height(height);
}
To ensure not all ng-show/hides fade in/out, a the directive animateFade doubles as a CSS class that is applied to the fading animations:
.animate-fade.ng-hide-add {
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity: 1;
}
I have a div which contains article titles from an RSS feed. This makes the div size dynamic depending on which feed is being looked at, length of article titles, etc. I would like to make the change in div height be a smooth animation like you see here, except using angularJS instead of jQuery.
The only animation I've done with Angular is just a fade-in fade-out text type stuff using
ng-enter{opacity:0;} ng-enter-active{opacity:1;}
Which was fairly simple, so hopefully this will be as well.
Simple example, based on ngAnimate innate monitoring of adding and removing classes. Define 3 css classes :
.transformable {
-webkit-transition: height 100ms linear;
-moz-transition: height 100ms linear;
-o-transition: height 100ms linear;
-ms-transition: height 100ms linear;
transition: height 100ms linear;
}
.small {
height:100px;
}
.big {
height:300px;
}
and declare your div :
<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div>
This should give you size-changing div on click : angular detects addition/removal of small/big classes and activates animation based on transformable css class values.
You can do similar things with other animation-ready directives (e.g. ng-repeat) or create your custom behaviours. The article from jessegavin seems like a good primer on this.