On the first screen, popover is under 100vh and not fully visible. After popover on click it changes position and becomes visible fully. Want to have correct position on click as on the second screenshot.
Related
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
I have a menu component that uses popperjs for showing the popup menu. When clicked on the button for the first time the popup appears at top left corner of the screen instead of below the button. I have used react portal for placing the rendered menu.
The problem resolves when I use useState hook to capture references of popper and reference elements(as suggested in the examples on react-popper). But I have implemented a clickaway hook to hide popup when you click any where but the popup, for which I need to use useRef.
and then I do usePopper(refElem.current, popperElem.current). I have reproduced the problem here
I use React and Material-UI. I use huge Popover with the Tooltip behaviour. The goal is to display data when the user hover some links. It's working well but i have a problem about scrolling.
I want to be able to scroll INSIDE the popover when the Mouse is inside it. The default behaviour is to let the user scroll the entire page instead of focus on the popover.
I have set a CodeSansBox to show you.
I have a slideshow of 12 images in place. When I click on the first image, the right arrow pops up which allows me to scroll to the next image. When I do so, the second image has no next button. The same is true for every picture except the first. The really odd thing is that when I hit the X button to close out, it scrolls to the next image. The previous button works correctly on all of the pictures, but there's something wrong with both the next button and the close(X) button
"Next" button is overlapping with "X" button.
If you hover a little lower from "X" button the "Next" button will appear.
I solved this by adding a position:absolute to .lb-prev, .lb-next to lightbox.css
I have few buttons and i have this transition for them when you're hovering them:
#include prefix(transition, background-color 300ms linear);
When i click the button the ng-repeat directive is repeating some list associated with that particular button. But when i have the animation on AngularJS first shows both the lists (for the button that is clicked now, and the button that was previously clicked) and after 300ms (the time of the animation) it hides the first list.
When i remove the animation the lists switch immediately, but i want to have the animation.
Is there any fix for this?
Thanks