Iam using modal library from material ui and i want to be scrollable when the context goes outside of the visible eye. The problem is that when i have my cursor outside of the white paper, the window doesnt scroll. But when i put in the white area and scroll, then the content scrolls.
I cant find any solution to why is this happening and how to fix this. Is there any config i missing?
Thanks.
import Dialog from "#material-ui/core/Dialog";
const classes = {
root: "modal",
paper: "modal-paper",
container: "modal-container",
};
const Modal = ({ open, children, onClose, className }) => (
<Dialog
open={open}
onClose={onClose}
classes={classes}
className={className}
>
{children}
</Dialog>
);
Related
I'm using FullCalendar in React and need a modal to pop-up when a button is clicked.
The issue I'm experiencing is that certain elements of the calendar do not fade behind the overlay and are instead at full opacity and in front of the modal.
Specifically, in dayGridMonth view the elements are the internal grid that makes up the calendar, the date numbers in each cell, the events and the current day highlight (i.e. all internal calendar elements). However, the toolbar header, the day text and the external border are all hidden as desired.
When in listDay or listWeek views, only the active button in the toolbar is misbehaving.
I've tried implementing a plain JS modal and also using react-modal. The issue persists in both.
import { useState } from "react";
import TaskModal from './TaskModal';
function Calendar (props) {
const [modalOpen, setModalOpen] = useState(false);
function addEvent () {
setModalOpen(true);
}
return (
<div>
<FullCalendar
headerToolbar={{
start: "addEvent",
center: "foo",
end: "bar",
}}
customButtons={{
addEvent: {
text: "+",
click: addEvent,
}
}}
some other props...
>
<TaskModal modalOpen={modalOpen} setModalOpen={setModalOpen} />
</div>
);
}
import Modal from "react-modal";
export default function TaskModal (props) {
Modal.setAppElement("#root");
return (
<Modal
isOpen={props.taskModalVisible}
onRequestClose={false}
contentLabel="My dialog"
>
<div>My modal dialog.</div>
<button onClick={() => props.setTaskModalVisible(false)}>Close modal</button>
</Modal>
);
}
The issue was simply that the problematic elements had a very high CSS z-index (as high as 999). This was resolved by adding className and overlayClassName props to the Modal. Then giving these classes an even higher z-index so that everything else would be behind.
I'm editing the React Router Modal Gallery example from their docs to include Material-UI dialogs. The problem is the exit animation (fade out) does not run because the URL changes as you close the modal, so it just disappears.
Is there a way to retain the current functionality and add the pleasant fade out?
What I need is very similar to this, but when you refresh the page on that example, the modal is still open, I need it to open without the modal on page refresh, just like in the codesandbox and default React Router example.
Note: this issue is not specific to Mui5, I just happen to be using it.
Not sure if it is what you want and not sure if it is the best approach.
You can manipulate the transition manually and do whatever you want when the animation is done via onExited() method.
const Transition = React.forwardRef((props, ref) => {
const history = useHistory();
return (
// use Slide to display a clearer transition,
// can replace it with Fade
<Slide
ref={ref}
{...props}
// do something after animation exited
onExited={() => {
history.goBack();
}}
/>
);
});
function Modal(props) {
// open state is used for transition trigger
const [open, setOpen] = React.useState(props.open);
const { id } = useParams();
const image = IMAGES[parseInt(id, 10)];
if (!image) return null;
function handleClose() {
// setting false to trigger exit animation
setOpen(false);
}
return (
<Dialog
open={open}
onClose={handleClose}
TransitionComponent={Transition}
scroll="body"
>
<Content />
</Dialog>
);
}
Here is the codesandbox for demo.
I am using the packages material-ui, react-router, and react-router-hash-link. I want to have a material UI drawer (along an appbar) have hashlinks that scroll to specific bodies in the page, however whenever I do this, the scroll will happen, but when I close the drawer it reverts the scrollbar to the top of the page.
I hope you found a solution, for anybody who came across here, here is a solution:
The Drawer is expected to be closed after navigation. So, if you updated the drawer state on the onClick handler it would work as expected.
<Drawer
onClose={this.handleToggleDrawer}
anchor={"right"}
open={this.state.openDrawer}
>
<List>
{links.map(({ text, to, icon }) => (
<ListItem
onClick={this.handleToggleDrawer}
activeClassName={"Mui-selected"}
to={to}
button
key={to}
>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
handleToggleDrawer = () => {
const { openDrawer } = this.state;
this.setState({ openDrawer: !openDrawer });
}
I am able to use hover and click functionality separately in material ui Tooltip.
Now i want following functionality using both.
when i hover the tooltip should open. If i click the tooltip should remain open unless i close it.
I have done following to achive hover and onclick
1. initially disableHoverListener is false as a result am able to show tooltip on hover
2. when i click on the button to open the tool tip i set open = true. The tooltip remains open. If i try to close the tool tip am able to set the open = false. but the tooltip doesnot close until i move the mouse.
Can someone guide me in solving the problem
Here is the code for whatever I could understand from your description.
You want the tooltip to show on hover (default behaviour). But if you make it controlled component. i.e you want to set open true on click and false otherwise the default behaviour won't work.
Working Example: CodeSandbox
Here's code hope it helped.
const [show, setShow] = React.useState(false);
const handleClick = () => {
if (show) {
setShow(false);
} else {
setShow(true);
}
};
return (
<div
style={{ display: "inline" }}
onMouseOver={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Tooltip title="You want to see me!" open={show} onClick={handleClick}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
</div>
);
I am working with Material-UI Dialog and I want to make it take 80% of the screen.
Ideally, I want something like this.
I am applying a margin to Dialog but it is not working as intended.
For older material-ui versions like 0.20.0:
<Dialog
title="Dialog With 80% Width"
modal={true}
contentStyle={{
width: '80%',
maxWidth: 'none',
}}
open={true}
>
This dialog spans the 80% width of the screen.
</Dialog>
And in material-ui V1 using these props may can help with your needs
fullWidth={true}
maxWidth = {'md'}
Here is examples and other props for Dialog component, or in more advanced way you can take a look into Dialog component code see what is happening there.
The paperFullWidth css class of Dialog component might be helpful. The only condition for using this class is the fullWidth prop of Dialog component should be true. Below is a sample snippet
import React from "react";
import Dialog from "#material-ui/core/Dialog";
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
dialogCustomizedWidth: {
'max-width': '80%'
}
});
const DialogExample = ({ classes }) => (
<Dialog
open
fullWidth
classes={{ paperFullWidth: classes.dialogCustomizedWidth }}
>
I'm a Dialog with customized width.
</Dialog>
);
export default withStyles(styles)(DialogExample);