Can a Modal be designed to work like a Dialog with the scroll set to 'paper'? I have a large amount of text to show in the Modal, but it exceeds the browser window's size without any scrolling option.
Can a Modal be designed to work like a Dialog with the scroll set to 'paper'? I have a large amount of text to show in the Modal, but it exceeds the browser window's size without any scrolling option.
Depending on the specific use case, you can manually style the content container within a Modal by setting a maxHeight and using overflowY: auto to create a vertically scrolling container similar to a Dialog set with scroll="paper".
For a live example, visit: stackblitz
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Backdrop from "@mui/material/Backdrop";
export default function App() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<div>
<Button onClick={handleOpen} variant="contained">
Open modal
</Button>
<Modal
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
border: "3px solid #000",
borderRadius: "10px",
boxShadow: 24,
py: 4,
}}
>
<Typography variant="h6" component="h2" sx={{ px: 4 }}>
Lorem ipsum
</Typography>
<Typography
component="div"
// 👇 Content box styled to scroll when overflowing
sx={{ px: 4, mt: 2, maxHeight: "50vh", overflowY: "auto" }}
>
Long text content here
</Typography>
</Box>
</Fade>
</Modal>
</div>
);
}
class Class { } const f0 = <T extends typeof Class> (c:T): T => { return c } const call0 = f0 (Class) //ok const f1 = <T extends typeof Class> (c:T): T => { const a = new c() return a //TS2322: Type 'Class' is not assigna ...
I have developed a React component known as StateWithValidation. import { useStateWithValidation } from "./useStateWithValidation"; export const StateWithValidation = () => { const [username, setUserName, isValid] = useStateWithValidation( ( ...
Is there a way to fix this issue? PS C:\Users\dys07\nomad tutorial\fokin-weather> npm install mem npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d1c4d2c1 ...
Can you explain the distinctions between <div />, <div></div>, <Component />, and <Component> </Component> for me? <Layout home> \<section\> \<h2\>Blog\</h2\> ...
My route configuration using react-router v3 is as follows: <Route component={App}> <Route path="login" component={Login} /> <Route path="logout" component={Logout} /> <Route path="/" component={Admin}> <IndexRoute com ...
In my React project utilizing Material-UI, I encountered a challenge with managing input focus within a dialog. Within the dialog, there are multiple input fields, and I aim to modify the default behavior so that pressing Enter shifts focus to the next inp ...
I spent a whole day debugging this issue without any luck. Issue: this.gridOptions.data = this.allTemplatesFromClassificationRepo ; **this.allTemplatesFromClassificationRepo ** remains an empty array. I have already called the activate() function to assig ...
Recently utilized Framer Motion in one of my Next JS projects. Encountering an unconventional console error when attempting to refresh the page. The page is integrated with SSR from the latest version of Next JS (V13.X.X). The error message reads as follo ...
Is it feasible to adjust the positioning and font color of my drop-down menu text? I aim to have the "title" section in black text on the left side and the "type" section in gray text on the right side of the drop-down menu. Currently, all the text is in ...
Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radiu ...
Typescript autoformatting has become a concerning issue. Whenever I input quoted strings (" or `), the code surrounding it seems to temporarily glitch, with other strings appearing as code. This problem has recently escalated, particularly with strings li ...
Whenever I click on the start/stop button, it triggers the handlePlay function. This function then proceeds to initiate the playBeat function. In an ideal scenario, the play beat function should continuously display 1222122212221222... until I press the st ...
Within my Next.js application, I am implementing search filters that consist of checkboxes. To display these checkboxes, I need to retrieve all possible options from the API. Since these filters are utilized on multiple pages, it is important to fetch the ...
I have a basic React component that looks like this: interface ComponentProperties { onClick?: () => void; } const CustomComponent = (properties: ComponentProperties) => { if (!properties.onClick) { return <></>; } ...
Encountering an issue with the proper invocation of F5 button or directive call URL from the address bar resulting in ngOnInit not being triggered correctly. Using a debugger to analyze the situation, it was noticed that callHook is not initiated after ngO ...
Troubleshooting Next.js Build: Error "next: not found" on Deployment Server Description: I've hit a roadblock with my Next.js project while trying to build it. The discrepancy between the local build process and the deployment server logs is outline ...
Looking to integrate the Tiny rich text editor into my code. Check out the TextEditor.js component below: import React from 'react'; import { Editor } from '@tinymce/tinymce-react'; class App extends React.Component { handleEditorCha ...
Here is the code snippet of my layout: import Menu from "./Menu"; import ButtonMenu from "./ButtonMenu"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" ...
Currently, I am in the process of developing a movie voting application for me and my friends using React. I have made significant progress but I am facing issues with setting or updating the state of the 'rating' object. The structure of the ar ...
As I was working on my current Stack constructor, I came across the Stack.formatArn() method. I started to wonder about the difference between using this.formatArn() and cdk.Stack.of(this).formatArn(). After all, shouldn't "this" refer to the stack it ...