how to custom rodal height

[dandingol03]

this is my case: i write a prototype tool,and i need a little modal to provide to user to fill some info, but when i inspect the modal element,i find it's height has been limited to 240px, so i wonder if there is any interface or props to use for it

[chenjiahan]

You can use height or customStyles prop to custom height of dialog.

[cniesen]

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%'}}>

[hmontes]

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.

[chenjiahan]

@hmontes You can get the innerWidth of window and set different height by window's width.

[fuzhongfeng]

I had solved this problem

[zenati]

@chenjiahan @fuzhongfeng Hello. How to make it possible to set the height dynamically depending on content ?

[fuzhongfeng]

I had forked this component in my profile , you can set the height dynamically depending on your css

[chenjiahan]

@zenati Try this:

const customStyles = {
  height: 'auto',
  bottom: 'auto',
  top: '30%'
};

<Rodal customStyles={customStyles}>

You can adjust the value of top property.

[knoya]

using a transform works for me

customStyles={{ height: 'auto', bottom: 'auto', top: '50%', transform: 'translateY(-50%)' }}

[ritsource]

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;
}

[saurabhnemade]

@knoya @ritsource It works on Chrome but on IE11 content gets shifted toward bottom.

[irgipaulius]

There is no way to change inner width and height for the modal using media queries. I am migrating to react-responsive-modal.