I am building a react app with a modal containing a form.
The css for that form wasn't working correctly so when I did an inspect element I figured out that the modal is outside the ... root element and when I copy the modal element inside a specific child element inside the root with the class "container__wrap" the css of the form works correctly.
So... I want the modal to be inside the root element and more specifically inside a div with the class "container__wrap like in the second attached picture. this is the modal code
render() {
const { modal, allDay } = this.state;
//console.log(this.state);
return (
<Modal
isOpen={modal}
toggle={this.toggle}
>
<div className="modal__header">
<button className="lnr lnr-cross modal__close-btn" type="button" onClick={this.toggle} />
</div>
<h3 className="page-title" style={{ color: '#2F9585' }} >Edit event</h3>
<br />
<br />
<ModalBody>
<form className="form form--horizontal" onSubmit={this.props.handleSubmit(this.onSubmit)}>
<div className="form__form-group" >
<span className="form__form-group-label">Title</span>
<div className="form__form-group-field">
<Field
name="title"
component="input"
type="text"
placeholder="Title of your event"
/>
</div>
</div>
<div className="form__form-group">
<span className="form__form-group-label">start</span>
<div className="form__form-group-field">
<Field
name="start"
component={renderDateTimePickerField}
onChange={this.handleStartChange}
props={{ showTime: allDay }}
/>
<div className="form__form-group-icon">
<TimetableIcon />
</div>
</div>
</div>
<div className="form__form-group">
<span className="form__form-group-label">end</span>
<div className="form__form-group-field">
<Field
name="end"
component={renderDateTimePickerField}
onChange={this.handleEndChange}
props={{ showTime: allDay }}
/>
<div className="form__form-group-icon">
<TimetableIcon />
</div>
</div>
</div>
<div className="form__form-group">
<div className="form__form-group-field">
<Field
name="allDay"
component={renderCheckBoxField}
label="All day ?"
value={allDay}
onChange={this.handleAllDayChange}
className="colored"
/>
</div>
</div>
<div className="form__form-group" >
<span className="form__form-group-label">description</span>
<div className="form__form-group-field">
<Field
name="description"
component="textarea"
type="text"
placeholder="description"
/>
</div>
</div>
<ButtonToolbar className="form__button-toolbar">
<Button color='danger' onClick={this.delete}>delete</Button>{' '}
<Button onClick={this.toggle}>Cancel</Button>{' '}
<Button color="success" type="submit">update</Button>
</ButtonToolbar>
</form>
</ModalBody>
</Modal>
)
};
Normally, React render components inside the root element. I guess the Modal you're using is from a UI library. And it might apply something like react-portal to make the modal component outside the root element. You can check the doc of that library see if they provide an extra prop to support render inside root element. Or you can create your own modal without using react-portal.
