I am using primeng multiselect in my angular app.
It is not behaving as shown in example ie. https://www.primefaces.org/primeng/#/multiselect
when the window is small, the dropdown after filtering is not showing downwards instead stays on top of other element.
the trigger css is updating the top position. how to update the top position on filtering the multiselect.
{
z-index: 1001;
transform-origin: center bottom;
top: -128px; //in my case this is not changing
left: 0px;
}
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 currently have something very similar to this project:
http://codepen.io/dmastag/pen/oXORpZ
but additionally, the window on the right contains tabs (md-tabs) so that on click you switch windows which have their own scrolls. Problem is, I cannot use scroll function on the right window, only on the left one. Any idea how to solve that? My goal is to extend the list in the right window when the scroll is at the very bottom of the list.
I tried to get the selector md-tab-content, because I suspected that its the window with the scroll, however it says that its value is null?! Am I doing something wrong? Do you have any other solutions to solve this problem? I will be greatful.
The DOM tree looks like this in the browser:
<md-tabs>
<md-tabs-wrapper>
<md-tabs-content-wrapper>
<md-tab-content>
</md-tab-content>
</md-tabs-content-wrapper>
</md-tabs-wrapper>
</md-tabs>
Do you have a plnkr or codepen with your code ? Did you tried something like:
md-tabs-wrapper{
position: fixed;
top: 0px;
left: 0px;
background-color: rgb(68, 114, 196) !important;
z-index: 1000;
width: 100%;
}
md-tabs.md-dynamic-height md-tabs-content-wrapper {
top: 48px !important;
}
I have a calendar represented with a table. The content of each day may be too much to display so the height is fixed and the overflow hidden. However when the user hovers over the row I have the entire row expand. This is working perfectly. What I need to ease the transition of the divs in the row from height:60px to height:auto, perhaps slow it to about 500ms.
I'm using AngularJS 1.2, I have ngAnimate loaded as well as animate.css (used elsewhere in the app).
Each day in the calendar is a div within a td tag.
div.cal_container
{
height:60px;
overflow:hidden;
}
And when I hover over the row this is what I use to expand the whole row:
table.cal tr:hover > td > div
{
height:auto;
}
How do I animate the height transition?
The problem seems to be that transitions don't like height:auto. I found this solution/workaround and it's giving me 95% of what I wanted:
Add max height to the div:
div.cal_container
{
height:60px;
overflow:hidden;
max-height: 60px;
}
Add the transition to the max-height in the row selector CSS:
table.cal tr:hover > td > div
{
max-height: 1000px;
transition: max-height 0.75s ease-in;
height:auto;
}
The last bit I'd like to get is to ease the transition back to height:60px when they stop hovering but this is less important.
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'm pulling my hair here. Trying to come up with a simple responsive layout where two fluid boxes are aligned next to each other. The main box must always be centered in the browser window, while the other should be aligned beside it in its top right corner. See example image below -
Tried different approaches involving negative percentages and three-column faux layouts but it just doesn't work.
Demo: http://dabblet.com/gist/7201560
Markup:
<div class='container'>
<div class='main-col'></div>
<div class='right-col'></div>
</div>
CSS:
.container {
text-align: center;
}
.main-col, .right-col {
display: inline-block;
vertical-align: top;
text-align: left;
margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.main-col {
width: 50%;
margin-left: 20%; /* equal to .right-col's width */
}
.right-col {
width: 20%;
}
What's happening here:
The centered main column and right column have display: inline-block, and they're centered in the viewport by giving their container text-align: center. They're still not centered the way you want though. Since they're sibling elements you can use margin to push the main column to the left with a value equal to right-column's width, essentially centering itself.
Hi you can check my try in this link http://jsfiddle.net/WHq8U/17/.
I had to use a little jquery to calculate the sidebar absolute position. Let me know your opinion about this.