In a AngularJS app, using ui-router, i want to change the height of an element (sidebar), when the content inside the sidebar gets updated.
Whats the best way to do this?
Related
I am stuck on implementing a UI in React.
I want to trigger a state change when an element crosses the centre of the viewport.
Here's a prototype of the design: https://cln.sh/sNhueq
In this prototype, the box on the right is sticky so it stays on the screen. And the list on the left moves as we scroll. I want to know when a list item crosses that red line so I can change the content of the box.
I am using framer-motion and react-intersection-observer.
Here's what I tried:
I tried using the viewport prop of <motion.div> but it triggers when the element enters the whole viewport. Yes, we can set root prop to an element's ref but for that the root element has to be an ancestor which the red line is not.
I tried react-intersection-observer but got the same results (because the ancestor limitation comes from the IntersectionObserver API in general).
I ultimately thought of some hacky non-performant ways like having a scroll listener, checking the bounds of root and target and finding if they collide. But I really don't want to do that heavy computing.
Is there any way with IntersectionObserver or something else that is performant?
Any help is appreciated. Thank you! :)
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.
Do you know if is it possible to do this properly with this library?
I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus(). However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.
If this.slider is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo() with the index of the desired slide. For example, to show the second slide:
this.slider.current.slickGoTo(1);
For details on the methods that you can call using your ref, see: react-slick API: Methods.
I have one RGL component in my application. It is rendered correctly but when I add some content in Grid item then the content overflows the grid item. It is not pushing the Grid item to increase the height also I tried after updating h component in layout but updated layout isn't respected too.
PS: This works me - I'd to update the key prop every time the height was updated. In short I'd to force re-render the RGL component. And the easy way for me was simply update the keys`.
I have a bunch of div elements and in want to know if the scroll is at a particular element I am using a custom scrollbar implementation(react-custom-scrollbars).
Here's the working code.
https://codesandbox.io/s/7j28kmoy86
I have a set of items which are rendered into a list. Each item will have a different height when rendered. I need to know item's height in advance before it's mounted into the DOM. So the container should know height of each item it's rendering before they're rendered :)
Is it possible to calculate the height of React element before inserting it into the DOM, dynamically?
I guess you can't get the elements's height before they are rendered because The DOM API can't give you the height of elements it doesn't even know yet.
Are all the different heights totally random ? If not, you could make a guess based on the props object of each element.