Comments (20)
No problem.
We are now using pure CSS to size the modal, which works as long as you style the components in the modal so that they result in proper width/height, relieving the need for any requestAnimationFrame/manual coordinate math:
...
content: {
border: '0',
borderRadius: '4px',
bottom: 'auto',
minHeight: '10rem',
left: '50%',
padding: '2rem',
position: 'fixed',
right: 'auto',
top: '50%',
transform: 'translate(-50%,-50%)',
minWidth: '20rem',
width: '80%',
maxWidth: '60rem'
}
...
from react-modal.
It would seem there are enough people asking for this feature. It's not sufficient to declare static CSS classes as this doesn't meet the needs of the OP - i.e. dynamic modal sizes.
It would be relatively trivial to implement additional props on the Modal
component that affect the size.
from react-modal.
It's been a while since there was any discussion on this issue. I'm assuming that it isn't a problem anymore. If it is, feel free to re-open the issue.
from react-modal.
Here is a hack I used to do a similar thing, vertically rather than horizontally.
- Add a ref name (ie:
ref='content'
) to your content container div. - Grab the height of the content container element once it is in the DOM and put it in state:
componentDidUpdate() {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(this.sizeDialog);
}
else {
// IE <10 CYA - Note: I haven't actually tested this in IE - YMMV
window.setTimeout(this.sizeDialog, 50);
}
}
sizeDialog = () => {
if (!this.refs.content) return;
let contentHeight = this.refs.content.getBoundingClientRect().height;
this.setState({
contentHeight: contentHeight,
});
}
Note that use requestAnimationFrame here - the ref was not yet defined otherwise. Maybe this has to do with the DOM magic react-modal does... At any rate this is a hack and I'm sure there is a better way to do this.
- In
render()
, usethis.state.contentHeight
to style the dialog:
const padding = 90; // adjust this to your needs
let height = (this.state.contentHeight + padding);
let heightPx = height + 'px';
let heightOffset = height / 2;
let offsetPx = heightOffset + 'px';
const style = {
content: {
border: '0',
borderRadius: '4px',
bottom: 'auto',
height: heightPx, // set height
left: '50%',
padding: '2rem',
position: 'fixed',
right: 'auto',
top: '50%', // start from center
transform: 'translate(-50%,-' + offsetPx + ')', // adjust top "up" based on height
width: '40%',
maxWidth: '40rem'
}
};
return (
<Modal isOpen={this.props.show} style={style} className='dialog'>
<div className='dialog__content' ref='content'>
... your content goes here ...
</div>
</Modal>
);
Hope this helps.
from react-modal.
Here's how I do it with my modals.
content: {
border: '1px solid #ccc', background: '#fff',
overflow: 'auto', WebkitOverflowScrolling: 'touch',
borderRadius: '4px', outline: 'none', padding: '20px',
top: '50%', left: '50%', right: 'auto', bottom: 'auto',
marginRight: '-50%', transform: 'translate(-50%, -50%)',
}
from react-modal.
@amangeot As David pointed out, the layout breaks if the children inside the modal exceed the dimensions of the viewport, but defining maximum dimensions for a child container in viewport units should take care of that. Using his code I ended up doing this:
.modalClass {
position: fixed;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
transform: translate(-50%,-50%);
outline: 0;
}
.childDiv {
max-height: 90vh;
max-width: 90vw;
}
At least for the image previews I am using it for, it seems to work really well, even on mobile.
from react-modal.
Hello guys,
did you find a solution to let the modal resize to fit its content's width, centering the modal in the window, without disabling vertical scrolling of the modal ? The modal should move, not the content inside the modal.
from react-modal.
import Modal from 'react-modal';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const CustomStyles = {
overlay: {
backgroundColor: 'rgba(32, 40, 46, 0.5)',
display: 'flex',
'align-items': 'center',
},
};
export const StyledModal = styled(Modal)`
position: relative;
overflow: auto;
outline: none;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 8px;
width: 290px;
`;
<StyledModal isOpen={ isModalOpen } onRequestClose={ onCloseModal } contentLabel={ "Modal" }
style={ CustomStyles } >
<InvisibleButtonWrapper/>
<div> content here</div>
</StyledModal>
from react-modal.
I get this fixed by writing HOC where i am using refs
to get content/modal height.
Link - https://gist.github.com/mohandere/b563d19f5f1c7bf027fd7129592e9ab8
from react-modal.
What about dynamic sizing of the modal in typescript?
from react-modal.
my solution is
... right: 'auto', bottom: 'auto', ...
from react-modal.
Thanks @davidmfoley.
It works quite well.
from react-modal.
Nice @davidmfoley
from react-modal.
Thanks for the pure CSS solution!
from react-modal.
Late to the game but not following how to dynamically size the modal. What I see is that the dialog width is set to 50%, (.popup-content width:50%). That ends up being 50% of the viewport. If I constrain the width of the contents that makes the content smaller but there is still a bounding rect that is 50% of the viewport.
div class="popup-content " style="position: relative; background: rgb(255, 255, 255); width: 50%; margin: auto; border: 1px solid rgb(187, 187, 187); padding: 5px;"
from react-modal.
I'm still having issues getting modal to auto-expand when react-datepicker is clicked on within the modal. Posted a question here: https://stackoverflow.com/questions/72890966/react-modal-how-to-get-modal-to-auto-expand-when-react-datepicker-is-clicked
from react-modal.
@callagga you can try to define de height as auto
, it will be a little bit of a challenge to make it position correctly.
from react-modal.
thanks - I've tried but did note"
- adding a: height: 'auto' - doesn't change anything
- additing the "height auto" and also removing the "bottom auto" - the size of the dialog is bigger, however it is big for the initial state before the date field has been selected, as well as after the date field is selected and the month calendar appears? so not dynamic. That is like this:
then
from react-modal.
I don't have any other options how to do it (((
.ReactModal__Content--after-open {
width: 1000px !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
min-height: max-content !important;
overflow: hidden !important;
}
from react-modal.
@polixisNG Actually, you do!! You can use the style
attributes do manage the size of the content and overlay.
http://reactcommunity.org/react-modal/styles/
from react-modal.
Related Issues (20)
- Replace focus trap with `inert` HOT 1
- Focus on the input element is lost when trying to scroll modal content by dragging scrollbar
- Focus trap incorrectly finds tabbable elements HOT 11
- Modal doesn't close on the first click on the overlay after click on elements containing event.stopPropagation() inside modal HOT 11
- Add support for React & Node 18 (as easy as adding startTransition() on each setState) HOT 18
- When I try to apply css variables from css modules in React, nothing is passed HOT 9
- Npm start related issue
- Why convert position property to inset? HOT 2
- Analysis: 90% of dependency updates in this repository can be merged.
- Should use event.key not event.code
- How can i make the modal overlay non blocking? HOT 2
- Resize error when moving tab around HOT 2
- Display blurry when elements with position attributes and have scrollbars. HOT 3
- Close the modal window on the first click when using stopPropagation() HOT 3
- Moving to a "modern" build system (hardcore level) HOT 6
- Refactor react-modal to use TypeScript HOT 1
- Replace Karma (now deprecated) with a new test runner HOT 6
- Runtime error when tabbing elements where shadowDom is a document fragment rather than an element
- Consider dropping support for React versions <= v16 HOT 3
- Avoid Scroll position being kept HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-modal.