I'm trying to use React Slick to display several cards.
I want that on entering the page with the slider this will slide to the selected/highlighted slide.
But I cannot find a way to get an index or identifier from the react-slider, maybe I'm missing some information.
All the examples show a way to track slides, but for my case (at least I think so) I'll need to have them already indexed so I can target the one I want. Any ideas?
Related
I am experiencing a bug from the range slider of mui wherein the marks get duplicated when both of the thumb slider reached the farthest right.
Initially my slider is like this:
Once I slide both of the thumbs to the farthest right an error will occur on the console:
Then the mark would get duplicated like this:
The cause was that the SliderUnstyled uses the value from marks as its key. Because of this, when both of the thumbs reach the farthest right, both of them would have a value of 100 which triggers the error of duplicate keys.
Here is also a link of a codesandbox from another developer facing the same issue: https://codesandbox.io/s/material-demo-forked-tlu40e?file=/demo.js
I saw a similar issue from Github from this link: https://github.com/mui/material-ui/issues/31960
One solution there was to modify the SliderUnstyled.js file from "material-ui/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js" wherein you need to change the key to the mark's index instead of the mark's value.
I've tried the solution from this https://github.com/mui/material-ui/pull/33526/commits/4ff58040654a4b75aa86691194df80bd2abd87b8 but I just want to ask if there is another solution to this issue wherein modifying the SliderUnstyled.js is not necessary.
Looking at the sandbox you linked and the mui documentation I believe you are using "marks" incorrectly. Marks appear to be used as static markers on the slider. You are instead assigning them to be the value, which does not appear to be necessary.
See: https://mui.com/material-ui/react-slider/
The developers of MUI already fixed this bug in their #mui/material#5.10.8 build. Updating to material 5.10.8 fixed the bug.
I have a strange case.
I must use a table library that has few features. There is no way to use react-table or more popular libraries.
I need the following feature => In the first column there are icons. If someone clicks on this icon, a new <tr><td>xyz</td></tr> should appear straight after this row.
It's a sort of tooltip, but instead of appearing on top of other content it should "add itself" between the row it has been triggered from and the next row.
I have no idea how to approach that.
The only things I have access to is the row index of the row the model was triggered from.
Is it feasible in React to create a component that somehow pushes a <tr> after the current td closes?
I am wondering if in react it's possible to manipulate HTML in a similar way, no matter if it is a bad practice...
Or maybe somehow running plain JavaScript is the only solution?
Any idea that helps me find a solution would be much appreciated.
I am learning to react native and I found the following term on this documentation.
If you have a long list of more items that can fit on the screen, you should use a FlatList instead.
Which means that the FlatList component is used for a flat list that is fit on the screen and not scrollable. But on the FlatList documentation it says:
The FlatList component displays a scrolling list of changing, but similarly structured, data.
Please, can anyone tell what does it mean? Because both documentations are going opposite.
There is a lapse in your understanding of the sentence from the first documentation link. It actually says:
If you have a long list of more items than can fit on the screen, you should use a FlatList instead.
Notice that it says than instead of that which are totally opposite of each other. The phrase than can fit on the screen means that you have items that cannot fit within the current display size, so using FlatList is recommended.
Both ScrollView and FlatList are scrollable components. Some differences are:
ScrollView is a lot more generic. You can nest any sort of component within a ScrollView and they won't complain. FlatList on the other hand accepts similarly-structured data.
Components contained within a ScrollView will render together when it loads. FlatList will only render its children which are within the scope of the screen, and render the remaining ones when user scrolls to them.
UPDATE:
When I say 'display', I mean the phone's actual, physical display, and by 'container' I mean the set of components/items which make up your app's current page, like a combination of text inputs, buttons, views, etc.
Consider the following Log In form (source):
Every item (component) in this container screen is visible on the phone's display since there aren't a lot of components to begin with. You can get away without using the support for scroll here.
However there a lot of times when you have a lot of components in your container but the display can only fit a limited number of them at a time. Rest of the components would, sort of, spill out of the phone's display. In those cases, you must use a scrollable component to properly display all of them, and so that your app's user can actually reach the components which are out of display's current range. For example an inbox with many messages, or a to-do list with many items:
In the image above, phone's display can only show first 6 items in the inbox. What about the rest of them? Of course you have to scroll to see them! You may use ScrollView or a FlatList to enable the support for scrolling here.
Now, if you use ScrollView in these cases, all children (inbox items) within the container will load when this particular app page loads, i.e. at the same time. Consider an inbox with 3000 items. It would take forever to load all of them at the same time! The user would be waiting for a long time for them to load. Therefore, a simple ScrollView won't work here.
Fortunately, we have FlatList for that.
When you use FlatList to display scrollable components, only a limited number of items will render at a time which can fit the current display (say, 6 items in the example above). What about the remaining 2994 items? FlatList will render them dynamically as the user keeps scrolling down.
I'm wondering how to achieve that.
I'm doing a scrollable one-pager and I made a menu which suppose to navigate to different sections on the page.Of course, what I need to know is what is the distance between section and top of the page. Menu is one component, the others are siblings to menu. I'd like to get it dynamically, ie. without setting it to fixed heights. I know that one answers could be to find a DOM element by JS, like so:
document.getElementById('contactSection')
and get a distance of this section from the top of the page. But it seems to be not elegant and probably not recommended way of doing this. Also it is pure JS.
Could you share how do you access to DOM independent elements?
Thanks!
I am using AngularJS for a mobile web application and would like to get some "mobile-like" animations to make it look really sharp. My ideal goal would be animations similar to the iPhone's Gmail application, which incorporates lots of animations, like pages sliding from left/right/bottom. And the menu bar fades in/out simultaneously.
I think applying multiple animations at once would require more than one ng-view, which isn't supported at the moment, so I'll hold off on that.
Right now, I just want to be able to make a simple slide-left and slide-right animation similar to how many mobile apps work when you go back and forth between pages. I'd want to have a Back button in my application and somehow be able to specify that this animation should be right-to-left. And a Forward button that I can say has an animation of left-to-right, etc.
This page has exactly what I want (the second demo where the pages slide both left AND right):
http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/
However, this demo is using the deprecated ng-animate command. I haven't been able to convert it.
I attempted to make this using the new AngularJS way of animating. I THINK the issue I'm running into is that when I change routes, I have two ng-view's at the same time and the "old" one still has the animation applied to it, so it looks weird.
Here is my attempt: http://plnkr.co/edit/Xa6Mvbfmux4BAISj9tJb?p=preview
Try pressing Run/Stop each time. I like how when you first run it and press B, both pages slide out together. But then the 2nd time when you press A, one page maintains the slide-right animation while the other does the slide-left, which I don't like. I also tried just removing the ng-leave CSS classes, but that adds some weird issues as well.
How can I update this code to make standard left-to-right and right-to-left sliding animations work?
Bonus: How can I structure the code to easily specify how I want each route/view change to animate? (Example: A-to-B = Left/Right, B-to-A = Right/Left)