Comments (12)
using a transform works for me
customStyles={{ height: 'auto', bottom: 'auto', top: '50%', transform: 'translateY(-50%)' }}
from rodal.
@zenati
Try this:
const customStyles = {
height: 'auto',
bottom: 'auto',
top: '30%'
};
<Rodal customStyles={customStyles}>
You can adjust the value of top property.
from rodal.
Clarification to @chenjiahan response.
If you specify height in pixles use the "height" property. Note that no units are specified. eg:
<Rodal height='300'>
If you specify relative height then you must use the "customStyles" property. eg:
<Rodal customStyles={{height: '80%'}}>
from rodal.
There is no way to change inner width and height for the modal using media queries. I am migrating to react-responsive-modal
.
from rodal.
You can use height or customStyles prop to custom height of dialog.
from rodal.
What about media queries? (Width for example).
The modal have a Dynamic or auto Height? If i see a content in a cell phone or in my browser the height is different.
from rodal.
@hmontes You can get the innerWidth of window and set different height by window's width.
from rodal.
I had solved this problem
from rodal.
@chenjiahan @fuzhongfeng Hello. How to make it possible to set the height dynamically depending on content ?
from rodal.
I had forked this component in my profile , you can set the height dynamically depending on your css
from rodal.
I used something like this.
<Rodal className='new_product_rodal' visible={this.state.visible} onClose={this.hide.bind(this)}
customStyles={{ height: 'auto', bottom: 'auto', top: 'auto' }}
>
<Whatever />
<Rodal/>
And then in the css.
.new_product_rodal {
display: flex;
align-items: center;
}
from rodal.
@knoya @ritsource
It works on Chrome but on IE11 content gets shifted toward bottom.
from rodal.
Related Issues (20)
- Change close button icon HOT 2
- Autofocus issue HOT 2
- 之前打开是居中的,现在不居中了! HOT 1
- A11y pressing `esc` close the modal HOT 5
- How to implement a close property on router change HOT 1
- id param HOT 4
- Trap Focus
- Typescript support HOT 8
- Keyboard navigation does not go to close button
- Event is not available on onClose HOT 2
- Nested rodal with esc closes all open modals
- Feature request: unmountOnExit HOT 1
- Feature : Touch hold move in and out feature. HOT 1
- Feature Request: Backdrop Filter in customStyles HOT 1
- How to exit modal when clicking outside of modal? HOT 1
- It is very sad that Rodal can't stop body scrolling when it is open or visible? HOT 1
- Example link in README is broken HOT 1
- Install problem with react versions HOT 5
- Install problem with React v18 HOT 1
- React Cropper misconfigured when viewport height changes HOT 1
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 rodal.