Modal

scarranca asked 6 years ago

I have set a modal top right but always appear in the center...


Anna Morawska staff answered 6 years ago

Hi there, 

down bellow is a working example, please compere your code with it, and let us know if the problem persists.

import React, { Component, Fragment } from "react";
import {
Button,
Modal,
ModalBody,
ModalHeader,
ModalFooter
} from "mdbreact";
class App extends Component {
state = {
modal6: false
};

toggle(nr) {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}


render() {
return (
<Fragment>
<Button color="secondary" onClick={() => this.toggle(6)}>
Top right
</Button>
<Modal
isOpen={this.state.modal6}
toggle={() => this.toggle(6)}
side
position="top-right"
>
<ModalHeader toggle={() => this.toggle(6)}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle(6)}>
Close
</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Fragment>
);
}
}

export default App;

Best,

Ania


scarranca commented 6 years ago

Hi Ania, i tried your example code copy paste but still appearing in the center of the screen...


Anna Morawska staff commented 6 years ago

Hm, this is strange, it works fine for me. Which version of mdbreact do you use? 


scarranca commented 6 years ago

Im using MDB 4.7.1


Anna Morawska staff commented 6 years ago

Please try to update your mdbreact version, today we're going to release v.4.8.5.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: MacOS Mojave
  • Provided sample code: No
  • Provided link: No