score:-1
you just need to add fullscreen flag to modal component in order to achieve full screen.
like below
<dialog fullscreen open={open} onclose={handleclose} transitioncomponent={transition}>
and if you don't want to use fullscreen, simply remove that fullscreen flag and don't need to use css here.
score:0
you can set the width of your dialog like this:
<dialog fullwidth={true} maxwidth='md'>
<div>
<button onclick={() => window.print()}>
print
</button>
</div>
</dialog>
as given in the documentation
score:0
for printing div, which is inside dialog, use below code, and add css also
import react, { component} from 'react';
import { button, dialog } from '@material/core';
export default class muitester extends component {
render(){
return (
<dialog classes={{paperfullscreen: "preprint"}} fullscreen>
<div id="dialogprint">
some text some text , some paragraph and so on
</div>
<div >
<button onclick={() => window.print()}>
print
</button>
</div>
</dialog>
);
}
}
add below code in css
.preprint {
height: auto !important;
max-width: 600px !important;
}
/*print dialog*/
@media print {
body * {
visibility: hidden;
}
#dialogprint,
#dialogprint * {
visibility: visible;
}
#dialogprint {
position: absolute;
left: 0;
top: 0;
}
}
score:0
i was looking for a full-screen dialog on mobile and a simple dialog for desktop and the below example resolved my issue, please take a look if helps.
import usemediaquery from '@mui/material/usemediaquery';
function mycomponent() {
const theme = usetheme();
const fullscreen = usemediaquery(theme.breakpoints.down('md'));
return <dialog fullscreen={fullscreen} />;
}
you can check demo on mui official documentation.
score:2
i solved it! change the classes of dialog:
<dialog classes={{paperfullscreen: "preprint printdialog"}} fullscreen>
here my css:
.preprint {
height: auto !important;
max-width: 600px !important;
}
/*print dialog*/
@media print {
.printdialog {
max-width: 100% !important;
}
}
Source: stackoverflow.com
Related Query
- Print MaterialUI Dialog fullscreen
- Snackbar over Dialog with MaterialUI
- How to put modal dialog in fullscreen mode using react?
- How can I control a dialog from another module with react and materialUI
- Need help dealing with spacing issue in MaterialUI Dialog Content
- MaterialUI Custom Hover Style
- MaterialUI Select set value is always out of range
- How to print the contents of enzyme's shallow wrapper
- How can I set a height to a Dialog in Material-UI?
- How to handle "outside" click on Dialog (Modal)?
- How to print an object on page?
- How to submit the form by Material UI Dialog using ReactJS
- How to print React component on click of a button?
- How to create MUI Dialog with transparent background color?
- How to add close icon in Material UI Dialog Header top right corner
- Should I use Ant.Design or MaterialUI or React-Bootstrap?
- Material UI Tooltip Stays Open after triggered Dialog is closed
- Custom alert dialog in react native?
- react-hook-form's setValue method is not working if input is in material ui dialog
- Re-render Reactjs components for print
- MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')
- yarn install failing import sys; print "%s.%s.%s" % sys.version_info[:3] invalid syntax
- Assigning default value to Autocomplete in MaterialUI and React.js
- Full text is not showing in alert dialog in react native
- Dispatch a Redux action with the subsequent action as payload to show a snackbar or dialog of Material UI
- MUI - How to open Dialog imperatively/programmatically
- How to use media print within Reactjs web app
- ReactJS components for PDF export, Excel export and print
- Material-UI TextField inside Popper inside Dialog not working
- React hook form - Field Array inside Dialog (Material UI)
More Query from same tag
- React Hooks render twice
- React - How to hide register/login in navbar once a user has logged in?
- React with react-bootstrap-4
- class level variable updated inside a componentWillMount function not accessible in render method after a function call
- How do I reset the useMutation hook of Apollo Client
- React.useContext is undefined
- React mapping objects, targeting errors
- Highlight a word in a row of a table in Reactjs
- How to call API and render a new component
- "No style rules found on passed Component" when unit testing direct child of styled component using react-testing-library
- Confusion after setting a property of a Map
- How do I stack two containers when they're in different components?
- React: componentWillUpdate
- ignore values from react hook returned array -
- Is there a way to get the height of a div set to `overflow-y: auto`
- React: Changed state in Child component. How to see the change in parent component?
- How can I test that some prop is received in the child component
- Why does react hook form errors object temporarily empty?
- How to access child route params in react router
- Move package.json up one dirctory in react app
- Add class without state in React?
- Object.entries does not cause rendering, although data is populated
- How to re-render component on url change
- Error with redirect route
- React function to wrap a jsx element
- how to access history object in new React Router v4
- ReactJS navigation menu
- Object is of type 'unknown'.ts(2571) in generic component
- Module not found: Can't resolve '../axios' in 'F:\React\react-complete-guide\src\Component'
- Hover on a styled component without wrapper