I am using react-scroll in react and i am trying to scroll the container div overflow-y after doing an action click in a button, but the function scrolls the body overflow not the container div. How can i do it?
The body has overflow: hidden, and the container div has overflow-y: scroll
Please check this link : https://medium.com/how-to-react/scroll-to-an-element-on-click-in-react-js-8424e478bb9
if you face any problem following the doc then open the code sandbox and play with the code and see the demo.
Related
I'm working on a Chatbox styling using MUI and I've a issue. I'm not able to interacting with the background elements when the Dialog is open. I'm only able to click on the Dialog content but not able to click on the background Form Component.
herer is he codesandbox link :
https://codesandbox.io/s/stupefied-snowflake-jolyw7?file=/src/components/Chatbox.js
in the Console I Change the z-index to 1 it worked but not able to interact with the foreground component that is chatbox.
You have to first close the modal then you would be able to make any changes in the background form.
Checked your code and found that outside click is not working the modal is is not hiding , with this you're unable to use the form.
change Dialog material UI to this :
<Dialog
disableScrollLock
disableEnforceFocus
hideBackdrop
onClick={handleClose}
aria-labelledby="customized-dialog-title"
open={open}
transitionDuration={{ enter: 500, exit: 500 }}
// scroll="body"
sx={{
paddingLeft: "50%"
}}
>
With this when you click in background form element , First the modal pop up will close and then you can make changes in the form.
Hope this helps !
I'm working on an application using MaterialUI that embeds in other pages using an iFrame. Whenever we show a component that renders into a Popover (both MUI select and menu components do this), the iFrame scrolls / jumps position as the popover opens.
Here is an example where this happens.
https://erehd6.csb.app
Happens in Chrome and Firefox, but not Safari.
To reproduce, you will need to scroll the iFrame off the top of the page. Then the popover demo buttons will exhibit this behavior, or the overflow menus to access code sources off the site (github/stackblitz/copy JS source/copy TS source):
<!doctype html>
<html lang="en">
<body style="margin: 0;">
<div style="height: 1000px;"></div>
<iframe src="https://v4.mui.com/api/popover/" style="border: 0; width: 100vw; height: 100vh;"></iframe>
<div style="height: 1000px;"></div>
</body>
</html>
How do I prevent this scrolling/jump from happening? The Popper component does not have this same issue, but I can't figure out how to replace the Popover with the Popper in a way that doesn't require a library fork (and a huge amount of re-testing our application). This happens in all versions of MUI btw, but I couldn't put the current site into an iFrame.
I tried replacing the transition component of Grow with Fade but that did not help. I'm still trying to pinpoint the exact issue, it's somewhere in the positioning code for the Popover.
Adding the disableAutoFocus={true} property to any Popover or any other component relying on Popover should prevent any scrolling weirdness. You might need to use disableEnforceFocus as well, depending on what behavior you desire. These are props from the Modal component (of which Popover is a "child" of): https://mui.com/material-ui/api/modal/
I just ran into a similar problem when using a <Menu /> in an iframe, which when opened, caused the browser to scroll the page and focus on the iframe. In the case of this <Menu />, I also had to add a autoFocusItem: false property to the MenuListProps, so these are the relevant props for me:
<Menu
MenuListProps={{
autoFocusItem: false,
}}
disableAutoFocus
/* other props */
>
{/* MenuList components */}
</Menu>
Adding to what #amitt said. In order to allow for both accessibility and to fix the menu jumping you can in addition to disableAutoFocus and autoFocusItem: false, you can manage your own focus state.
By using a ref, you can control the focus on enter.
const onFocus = () => {
ref?.current?.children[2].children[0].firstChild.focus();
};
<Menu
MenuListProps={{
autoFocusItem: false,
}}
disableAutoFocus
ref={ref}
TransitionProps={{
onEntered: onFocus,
}}
/* other props */
>
{/* MenuList components */}
</Menu>
Inside my react-router-dom Link, I have an icon. Whenever this icon is clicked, it turns red. How can I prevent this?
Gif showing the problem
That color comes from default css for html a elements.
You just need to override the css color of the link.
Simple example:
.my-link {
color: inherit;
}
I learn ReactJs and the react-bootstrap NavBar. I wanted to have a fixed="top" NavBar so it is always visible. So the content is scrolled under it!
The two problems i have here in my CodeSanbox is that the side-bare that the NavBar menu opens is under the NavBar.
I think I know why it's because of the fixed="top" property on the NavBar. I have tried to understand how it works and it looks like I have to calculate the NavBar height and set that as top margin for the side-bare. Any better idea or if I'm wrong here please advice?
My other problem is the size of the 3-strip icon Hamburger menu. How can I change it to be bigger? I read the docs and I see no information for this?
For the .side-drawer, you can adjust the top property (e.g., top: 146px) or you can add some padding to the sidebar element so that it makes space for the header.
.side-drawer {
padding-top: 160px;
}
As for the hamburger button dimensions, I recommend resizing .navbar-toggler-icon
.navbar-dark .navbar-toggler-icon {
height: 100px;
width: 100px;
}
I am working on react-bootstrap overlay popover control. I only want the popover message to trigger when the mouse pointer is hovering over the icon. When I click on the icon, I get the dialog modal but I also get the message which will not hide until I click again.
Here is my jsx code
<OverlayTrigger
placement="top"
trigger="hover"
overlay={(
<Popover id="test">
test message
</Popover>
)}
>
</OverlayTrigger>
at first, I tried no trigger, still the click triggers the hover text. Next, I added trigger={'hover'},
thinking if I specify only hover as the trigger, but click is still working and activating the hover text.
How can I get only mouse hover to be the only trigger and not click? The click is reserved for onclick to bring up the modal.
Thanks
after reading react-bootstrap webpage, I added the working code