Is there any way through Selenium or Javascript to perform a horizontal scrolling in MUI table?
Due lazy loading it's impossible to perform Actions to element that does not exist, i.e. element I'm looking for that's not in the DOM yet.
Example of situation:
Imagine I have columns from A...Z but only A...F are visible and in the DOM and column Z will be in the DOM only after scrolling to the end of right side.
I already tried increasing scrollHeigh in a scrollable element (.MuiDataGrid-virtualScroller) in order to perform scrolling. It increases without exception, but does not perform a real scrolling.
I also tried scrollIntoView to last cell/column but it's not enough to lazy loading call rendering for next column.
Scroller element does not accept sendKeys, though. Hence no Keys.RIGHT acceptable.
Related
I am trying to getText from a column in ag-grid table using Katalon Studio. This column is at the end of the table and not visible until scrolled. I have tried using Katalon keywords Scroll to Element and Scroll to position but the scroll is not happening, I can easily getText from the column if I scroll the table manually but otherwise the getText fails with msg "Unable to find element".
How do I achieve this through automation using Katalon?
Kindly please guide me.
Thanks in advance.
ag-grid uses DOM virtualistaion to vastly improve rendering performance.
As the user scrolls horizontally or vertically, the grid dynamically updates the DOM and renders the additional cells that are required while also removing the cells that are no longer in view.
That is the reason, the elements are not present when you don't scroll them into view.
If you anyways want to load the columns for the rows, you can turn off column virtualisation by setting suppressColumnVirtualisation=true at grid level.
Keep in mind that this has performance cost associated with it.
Reference: Column Virtualisation
I have two shape at same position, not same color, and when i click over them, i want to fire click event on both, not just the first.
These two shapes are in the same container.
I have tried getObjectsUnderPoint() under stage.on("mousemove"), but this function increase my FPS (60 to 32~, and inside there are just a console.log), So it's not a good solution.
I tried the bubble, the useCapture, but i think it isn't what i want.
I just want to fire click on all element behind my mouse.
If someone have a solution, please.
There are a few points here:
EaselJS objects sort of work like HTML DOM Elements. If an element has a mouse handler on it it will block objects in other hierarchies below it from receiving the event. This is just how it works. The main difference is that if you don't have mouse events, then they are just ignored (like if you set the pointerEvents on an HTML element to none to have the mouse ignore it).
Your idea with getObjectsUnderPoint is what I would have recommended. Running any hit-test logic on mousemove is going to be expensive (mousemove fires a LOT, which is why we give the ability to throttle the typical mouseover check if you enableMouseOver on the stage).
A few things to optimize it:
Ensure you are using mode=2 on your getObjectsUnderPoint, which will only check objects with mouse listeners. This greatly reduces the overhead in checking. [docs]
Instead of checking the stage on your own mousemove event, set a flag to check it on tick. This throttles it to your Ticker FPS at least. You could also set an interval to check it even less often. It can create a little bit of a visible lag, but you can probably find a nice balance.
Reduce what is checked. If you have a container with your clickable elements in it, you can only check that object for mouse interaction.
If your objects are the exact same, you can also just trigger the click manually on the second item.
obj1.on("click", function(event) {
obj2.dispatchEvent(event);
});
I hope those approaches provide you a solution. Let me know if you have follow-up questions.
Cheers,
I'm building a notes taking Vue app.
The note being edited is auto-saved every X secods.
Every time it auto saves, I want to show a small message on the bottom of the screen saying "Note Saved". This will fade in stay for 2 seconds and then fade out automatically.
I've done transitions in Vue before but not on-off transitions like this.
I can set a property linked to the element with v-if wrapped in a transition block. But then I need to change the property twice (true-false)? Would I need to set up a timer to wait the transition to be over before setting it to false again? Seems a bit hackish. What's the best way to approach this?
I think what you've described with v-if makes sense... you could change the property (or data) in a v-on:enter method on the related component. This would nicely isolate the behavior to the component and be pretty apparent to future-self.
A completely different approach would be defining a single animation with keyframes that transitions from hidden to display to hidden, but that might be somewhat confusing: what is the leave transition of an element with such an enter transition? Hmm.
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
The design of the application I am working on changes the layout based on the width of the device and there is a Flatlist component that calls scrollToIndex on the selected item so that it does not fall out side of the view when the app changes it's layout. If the last item is selected and scrolltToIndex is called, on iOS it will scroll the item all the way to the top and hide all the items above it. That makes it appear like it is the only item left and the only way to bring back the other items is to manually pull down the list. On android it works perfectly i.e it will only scroll an item high enough to fit as many items below it as possible (if more than height of container, it just scrolls it to the top).
From the FlatList>ScrollToIndex docs:
Note: Cannot scroll to locations outside the render window without specifying the getItemLayout prop.
Because FlatList is virtualized (i.e. efficient because it doesn't render the full list offscreen), it doesn't know the location of all of the elements (since they're not pre-rendered, and hence their size is unknown). It needs you to help by providing element sizes through getItemLayout to scroll beyond what's near visible. I suspect "near visible" may vary device to device with different memory settings. If you don't do this, you can end up with gaps in your list since exact placement is unknown.
So, you'll need to implement getItemLayout or use the less performant (and depricated) ListView component.