I'm using react-bootstrap's modal to render a modal for my CRUD app when the user clicks on read for an item a modal will pop up with all the info requested. The problem is rendered on first launch of the app and it stays forever. The modal stays on the bottom of the page and my Boolean to show/hide the modal, here's how I call it:
<Modal.Dialog open={this.state.showServiceModal}>
doesn't do anything to help, when I remove the open prop, same result happens: the modal is always visible, and should't models appear on the center of the screen? What gives? The modal appears on the bottom and I want it to appear in the middle and my close modal button doesn't work either, bootstrap's modal is giving me a tough time, how can I fix all of these problems?
Here's my render:
render() {
return (
<div>
<div className="container content">
<div className="row">
<div className="col-6" />
</div>
</div>
<Modal.Dialog open={this.state.showServiceModal}>
<Modal.Header>
<Modal.Title>Service</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
<span>id:</span> {this.state.currentService.id}
</p>
<p>
<span>description:</span> {this.state.currentService.description}
</p>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => this.setState({ showServiceModal: false })}
>
Close
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
)
}
You are using open prop on Modal.Dialog to open and close modals. But react-bootstrap's documentation has no such API for Modal.Dialog as it used to display static modal.
Use Modal component as parent and make use of the show prop instead. Also use the centered prop to make it vertically centered.
Here is an example:
<Modal
show={this.state.showServiceModal}
onHide={this.handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
{...}
</Modal>
Here is a demo in sandbox:
Related
I want to embed a custom react component inside an SVG but it's not working. Is it even allowed in an SVG? if not, are there workarounds?
Below is my code, trying to insert the Modal component:
<polygon
id="Paris"
<Modal show={show} handleClose={hideModal}>
<p>Modal</p>
<p>Data</p>
</Modal>
<button type="button" onClick={showModal}>
open
</button>
stroke="#010101"
fill="rgb(251, 106, 106)"
stroke-width="2"
stroke-miterlimit="10"
points="1596.182,374.685 .../>
What I am trying to accomplish is to display a popup when we click on a province inside an svg map.
For what your are trying to achieve, I will wrap svg's inside the modal. Something like this:
<Modal>
<svg></svg>
</Modal>
In your modal component, make sure to display svg as children:
return (
<Fragment>
{props.children}
</Fragment>
);
Take a look in the doc for more info: https://reactjs.org/docs/composition-vs-inheritance.html
Following #Robert Longson's comment, I inserted the Modal component inside a foreignObject and it works. Still the Modal window needs to be adjusted manually as far as the x, y coordinates are concerned so that it pops up exactly over the clicked svg element:
<foreignObject x="58%" y="6%" width="200px" height="250px">
<Modal show={show} handleClose={hideModal}>
<p style={{ padding: "10px" }}>Modal</p>
<p>Data</p>
</Modal>
</foreignObject>
Please note that you must set the x,y, height, width attributes for this to work, as documented in this answer React - html tags inside svg
Using antd for adding an dropdown menu.Its not closing on mouse leave and click of an item inside dropdown.it remains open in the same place when page is scrolled.
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["click"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
It's because you have mentioned click as trigger. remove this prop so default will be hover or add hover
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["hover"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
I am using the react-bootstrap Tab component and wish to include a button in the tab title. To set the text of the title you must pass the desired text as props. I want to include a button to remove the tab, appearing next to the text.
I have tried passing a function that returns the button element, but nothing displays in the tab title.
<Tab eventKey={data.name} title={data.name}>
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}
>X</Button>
<TemplateTabs name={data.name} />
</Tab>
Right now the above code renders the button inside the tab page, whereas the desired location would be in the tab title. The template tabs component is what displays in the tab page. Ideally, I am looking for a way to continue to use the react-bootstrap Tab component, but be able to render the tab title and button to remove the said tab. Below is the documentation for the Tab component I am implementing from react-bootstrap. Please let me know if any more information would be useful.
https://react-bootstrap.github.io/components/tabs/
The documentation says type node: https://react-bootstrap.github.io/components/tabs/#tab-props
So this should work:
<Tab
eventKey={data.name}
title={
<>
{data.name}
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}>
X
</Button>
</>
}>
<TemplateTabs name={data.name} />
</Tab>
I need to add another button on the Modal footer. How can i do it? In the documents you can only edit the ok and cancel buttons, but doesn't have a docs on how to add another button.
Use footer property of Modal which accepts an array of components.
<Modal
visible={true}
footer={[
<Button key="1">1</Button>,
<Button key="2">2</Button>,
<Button key="3" type="primary">
3
</Button>
]}
>
<p>Some contents...</p>
</Modal>
I have a login button in home page. When I click on that it will redirect to login page in chrome and edge but not in firefox. I am not able to get how to resolve this. Please help me fixing this.
export default class Welcome extends React.Component{
render(){
let button
if(this.props.status){
button = <LogoutButton onClick={this.props.logout} />;
}else{
button = <LoginButton />;
}
return(
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Typography variant="h5">
Welcome
</Typography>
{button}
</header>
)
}
}
function LoginButton() {
console.log("test")
return (
<Button variant="contained" color="secondary" style={{margin: '2rem'}}>
<Link to="/login">Log In</Link>
</Button>
);
}
function LogoutButton(props) {
return (
<Button onClick={props.onClick}>
Logout
</Button>
);
}
And in console it is showing the below warning in only firefox
"The Components object is deprecated. It will soon be removed"
It's confusing behavior due to the browser differences, but the Firefox behavior is reasonable.
In the end, by having a Link inside a Button you are producing html like the following:
<button>Log In</button>
In Firefox, it appears that the button receives the click event and doesn't pass it through to the a element.
One way to fix this is to have the Material-UI Button use Link as the outer component:
<Button
component={Link}
to="/login"
variant="contained"
color="secondary"
style={{ margin: "2rem" }}
>
Log In
</Button>
This also fixes some styling issues (text being underlined/blue) with your initial approach (though you may have overridden the default a styles in your app so that this wasn't noticeable).
Below is a CodeSandbox demonstrating three login button approaches:
The solution approach with component={Link} to="/login" as props on Button
A simple <button><Link to="/login">Log In</Link></button> version to show that this also doesn't work in Firefox
Your original version