Is there any way to have several paper-toasts stacked and visible at same time? I've tried to creat an ul with many li that contain each one a paper-toast and set the paper-toast.fitInto property to the parent li with no success
Thanks in advance
if (currentToast && currentToast !== this) {
currentToast.close();
}
This piece of code present inside the paper-toast element does not allow more than one toast to be opened at a time. So i don't think what you want is achievable with paper-toast
Related
I am using react-animated-css, for simple animation in react. I have a list which I am rendering in a <ul> tag. I am adding animation to the first element of the list.
This list is getting updated every 3 seconds. And new element is added at the first position in the array.
The problem is, on load the animation is happening but not on update.
Here is full code : https://codesandbox.io/embed/ecstatic-cloud-qdpcj
I am not able to create a tag with 'react-animated-css' name as I am not eligible. It would be helpful if someone creates one for this.
You must define a key property for every element in a map. If you do not define one the array index is the default key. So the first element with key 0 will be reused after each render and only the last one will be added. If you define a key, the redrawing will based on the key value, and the first one will be added.
{items.map((d, i) => {
if (i === 0) {
return (
<Animated
key={d}
animationIn="bounce"
animationOut="flash"
animationInDuration={1000}
animationOutDuration={1000}
isVisible={true}
>
<li>{d}</li>
</Animated>
);
Here is the example: https://codesandbox.io/s/pedantic-darkness-vgp3f
From my point of view "react-animated-css" this library is not getting re-rendered once the state gets updated.
I have tried it with simple css animation property "#keyframe" and is working fine and getting re-rendered when state changes.
Code-sandbox link :
https://codesandbox.io/s/suspicious-dijkstra-h1q7u
I have a number of Div's on a layout, each of them draggable, so there's the possibility of the user dragging them into positions where they will overlap.
I want to set the most recently made visible div to have a z-index value that's +1 from the last, and for this I'm using a $scope.nextIndex variable that's incremented each time one of the div's is made visible.
Each div has its own variable to track its own z-index value: $scope.one_zIndex, $scope.two_zIndex, $scope.three_zIndex, and each correctly gets assigned an incrementally larger value as each div is shown, hidden and shown again.
Each div has its own class: one_z, two_z, three_z
What I can't make work is assigning the variable to the z-index style on the divs themselves via the controller.
var myVar = document.getElementsByClassName("one_z");
If I log this to the console, I get what I expect - an array with one element [0]
[]
0 : div#one_z
length : 1
one_z : div#one_z
__proto__ : HTMLCollection
I would assume that I could set the z-index simply like this:
myVar[0].style.zIndex = $scope.one_zIndex;
However this throws an error:
Uncaught TypeError: Cannot set property 'zIndex' of undefined
What am I missing? Or is there a better way to accomplish this?
Here is a working plunker https://plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview
You can set zindex via ng-style:
<div ng-style="{'z-index': $lastIndex;}">...</div>
This example completely useless in your case, but there is an example of ng-style usage. In your case I'd set index as property of you div element data source.
What wound up working was this:
First, I switched to IDs instead of classes, which likely didn't impact the solution but as each div was only ever going to exist once, IDs was the more correct way of identifying them.
Then, in the function that displays the div, I used this:
_.defer(function(){
jQuery('#one_z').css('z-index', $scope.one_zIndex);
});
There appeared to be an issue where I was showing the div and trying to set its z-index before the DOM had updated to include the div, so _.defer (I'm using Underscore.js) prevented the accessing of the z-index until everything had updated once, and it works.
As I mentioned in another comment - using ng-style wasn't working for me, and I had tried the _.defer with that approach as well initially without success.
For the record - I've used jQuery() instead of $() so it's clear in the code that this is a jQuery and not an Angular solution, and while I'd ideally have liked a purely Angular solution to this problem, this is clean enough for me, and doesn't do any DOM manipulation outside of Angular's purview that impacts the rest of the application in any way, it's purely display candy.
I have the following in to show and hide the clear button based upon if the searchQuery is empty or not. When a user starts typing in the input box, the button shows instantly.
However, when the user either clicks the clear button or deletes all input, there is a noticeable lag before the clear button is removed. I have tried ng-show as well, and have received the same results. Any ideas why this lag might exist?
HTML
<button ng-if="search.cardsQuery.length" class="button-icon" ng-click="clearSearchQuery()">
<i class="ion-android-close search-cards"></i>
</button>
CONTROLLER
$scope.clearSearchQuery = function() {
$scope.search.cardsQuery = '';
};
Check the css class on the element you're applying ng-if/ng-show to. Look for the transition effect. If the class has a transition, it may be the cause to the delay:
.button-icon {
transition: all .5s;
}
Its a common problem seen among the developers. Even trying with ng-if causes the same issue. I can suggest a simple solution for you.
Open your css file for the particular html file and add below line.
**.ng-hide { display: none !important }**
Hope, it will help.
$scope.$evalAsync();
Worked for me :)
I have a list of elements rendered with
%ul{ :"ng-repeat" => "cospace in cospaces" }
Inside of each li I have an element that loads another div with { 'ng-mouseover' => "loadSubAttr(cospace.id, 'is_in_wishlist')"}
I want that other div to display when a condition is met and that works perfectly with this code { :'ng-show' => "nb_copassers > 0" }
The problem is that it toggles the display of the div inside the li for each li.
For example, I hover over an item and if my condition is met, all lis will display the div. How do I make the ng-show local to each li? Or is there a better way of doing this all together? Thanks.
When you use nb_copassers > 0 as the ng-show expression, you probably want to use a value that is related to the "cospace" that ng-repeat is currently iterating through. For instance:
{ :'ng-show' => "cospace.nb_copassers > 0" }
If you don't have a value of nb_copassers for each cospace, you won't be able to decide which one you'll display the div for! Or maybe there's another criteria for deciding which element should display the div, but you don't mention that in your question so I assume there isn't. If there is, update your question and I'll adjust this answer.
I have a sidebar defined in my main layout which most of the time will display the login form. After the user is logged in I need to remove that form and replace it with user data. I also need to change that sidebar when viewing the support section to show the sub-sections.
Do I need to move the element loading to each view or is there another way?
Thanks in advance,
Denis
Bottom line is you're gonna need an if($supportpage){} elseif($loggedin){} else{} block. If you don't want to put it in your layout file you could create an element for each option and then set() the correct one from the app_controller:
if ($supportpage) $sidebar = 'support';
elseif ($loggedin) $sidebar = 'loggedin';
else $sidebar = 'notloggedin';
$this->set(compact($sidebar));
And then put $this->element($sidebar) in your layout.