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>
Related
Anyone please can help? have been looking for solution all over with no luck:(
want to create a popupMenu that opens Dialog page, but should close menu item on click.
<IconButton {...bindTrigger(popupState)}>
<i className="fa-solid fa-ellipsis-vertical"></i>
</IconButton>
<Menu {...bindMenu(popupState)}>
<EditEventModal />
<DeleteEventConfirmation />
</Menu>
not closing
Everything is in the title. Here is the CodeSandbox with reproduction !
When using MUI's ButtonGroup, the layout is fine with three "regular" buttons:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
But as soon as we add an href to one of the buttons, it breaks the layout, like so:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button href="test.com">One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
Is there any way to fix this ? I don't want to have to use the trick of onClick and location.replace or location.href...
Also, maybe I should post this as an issue on MUI's GitHub? I'm guessing only if it is relevant and not fixable, but there are so many I doubt they would see it.
Use the prop LinkComponent="button":
import * as React from "react";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
export default function BasicButtonGroup() {
return (
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button LinkComponent="button" href="test.com">
One
</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
);
}
Demo: https://codesandbox.io/s/basicbuttongroup-material-demo-forked-43pmhn?file=/demo.js:0-430
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'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: