I am using antd design in my React App. I have noticed that antd design modal flickers when opened.
Is there a way I can fix this problem?
I am following the instructions from https://ant.design/components/modal/
I do not have a codepen for this but I have written all the modals in following way and I am using the css from antd design.
<Modal
visible={visible}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
Submit
</Button>,
]}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
Never happened to me. Did you check for any css in developer tools that might be causing this issue?
Example, when i was using modals, my background was getting dark. When I checked one of the ant's default class (which was not needed at all. It was a wrapper div which wrapped the actual modal divs) had dark background because of which that was happening. So, either by setting the background: transparent; I could solve that issue. But then i found this:
mask = {false}
This goes into your modal declaration. Something like this:
<Modal
visible={visible}
mask = {false}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
Submit
</Button>,
]}
>
So, give it a try. This might solve your problem.
One way to solve this issue:
Pass the prop transitionName="" to the component that is flickering, which disables the transition on the component thus no flickering occurs.
For more on this visit:
https://ant.design/components/modal/#How-to-disable-motion
Related
I have a Popover that contains a List Group of menu choices. Upon clicking "edit" from the list group, my code brings up a modal with a form in it. I have solved a previous issue of the modal closing when clicked anywhere inside the modal by adding
e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
to the onClick listener for my Popover component. This addition however does not allow me to click on form input fields within the modal, specifically the file input fields, clicking on Select File does nothing. I removed the preventDefault action and it allows me to select files but refreshes the page upon form submissions. How can I achieve proper form submission from a modal that is being displayed after an action is taken in a Popover?
Full code is as follows (EditSong is my Modal with Form):
const PopoverMenu = React.forwardRef((props, ref) => {
return (
<Popover id="popover-basic" {...props} ref={ref}>
<Popover.Body className="pt-2 ps-2 pb-2 pe-2">
<ListGroup variant="flush">
<ListGroup.Item action>Delete</ListGroup.Item>
<ListGroup.Item
action
onClick={() => setShowEditModal(true)}
>
Edit
</ListGroup.Item>
<EditSong
show={showEditModal}
setShow={setShowEditModal}
/>
</ListGroup>
</Popover.Body>
</Popover>
);
});
<OverlayTrigger
trigger="click"
rootClose
placement="bottom"
overlay={
<PopoverMenu/>
}
>
<i
className="fa-solid fa-ellipsis"
style={{ fontSize: "1.5em", cursor: "pointer" }}
>
</i>
</OverlayTrigger>
Had a similar situation but with the overlay over a modal. The answer was to use enforceModal prop to remove focus from the bottom modal so that input inside overlay could be focused. This might be of help:
React-Bootstrap input text lose focus when opened from a OverlayTrigger in a Modal
I have a parent component that renders both a react-bootstrap Popover and a DropdownButton, like so.
const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Popover = ReactBootstrap.Popover;
const DropdownButton = ReactBootstrap.DropdownButton;
const Dropdown = ReactBootstrap.Dropdown;
class App extends React.Component {
render() {
return (
<React.Fragment>
<div className="d-flex w-50 justify-content-around">
<OverlayTrigger
trigger="hover"
placement="right"
overlay={
<Popover id="popover-basic">
<Popover.Title as="h3">Popover</Popover.Title>
<Popover.Content>My Popover</Popover.Content>
</Popover>
}
>
<Button>Hover Over Me First</Button>
</OverlayTrigger>
<DropdownButton title="Then, Click Me Second">
<Dropdown.Item href="#/action-1">This</Dropdown.Item>
<Dropdown.Item href="#/action-2">Overlay</Dropdown.Item>
<Dropdown.Item href="#/action-2">Won't</Dropdown.Item>
<Dropdown.Item href="#/action-2">Apper</Dropdown.Item>
<Dropdown.Item href="#/action-3">After</Dropdown.Item>
<Dropdown.Item href="#/action-3">Clicking</Dropdown.Item>
<Dropdown.Item href="#/action-3">Popover</Dropdown.Item>
</DropdownButton>
</div>
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Issue:
Once the popover is triggered via an event, the Dropdown no longer works at all, even after the popover is dismissed. I have used both the Dropdown and DropdownButton components, and the issue persists. I have even tried changing the popover's triggering event to hover, and no luck there either.
Specs:
React-Bootstrap 1.4.0
React and ReactDOM 17.0.1
Twitter Bootstrap 4.5.0
Here is a pen demonstrating the problem if you want to fiddle with it https://codepen.io/UntidyJoseph/pen/abZaZqe
Any ideas on what I'm doing wrong?
EDIT:
I should also mention that both of these components come straight from the React-Bootstrap documentation, and seem to have every reason to work together.
An update of "react-overlays" to version >= 4.1.1 fixes this problem. I simply added this specific version into my package.json file to avoid sticking to the old 2.x through dependency resolution.
I am creating a page to display badges as I implement gamification features to my project. Right now, I want to display a 'grey' badge when the user has not unlocked the badge. Something like this:
Once the user has unlocked the badge, a 'bronze' badge will be displayed instead.
I am using Ant Design to make the card component to display the badge. The code currently looks like this. I don't know how to toggle the visibility between the badges. They are supposed to occupy the same space. Unless there is a better way to do it.
<Col span={6}>
<Card type ='flex' align = 'middle'>
Atta Boy!
<img src="/greysmall.png" justify = 'center'/>
Card content
</Card>
</Col>
Can you use a ternary operation that shows one or the other based on a bool value?
<Col span={6}>
<Card type ='flex' align = 'middle'>
Atta Boy!
{isBadgeEarned
? <img src="/success.png" justify = 'center'/>
: <img src="/greysmall.png" justify = 'center'/>
}
Card content
</Card>
</Col>
I have a working example reproducing this issue on codesandbox.io.
What I'm trying to do is do the 'sit below' menu as demonstrated on the Material-UI documentation.
return (
<div className={classes.root}>
<div>
<Button
buttonRef={node => {
this.anchorEl = node;
}}
aria-owns={open ? "menu-list-grow" : null}
aria-haspopup="true"
onClick={this.handleToggle}
>
Toggle Menu Grow
</Button>
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
id="menu-list-grow"
style={{
transformOrigin:
placement === "bottom" ? "center top" : "center bottom"
}}
>
<Paper>
<ClickAwayListener onClickAway={this.handleClose}>
<MenuList>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
<Button color="default" variant="contained">
{" "}
I'm a button that sits under the menu
</Button>
</div>
);
The issue I have here is that the Button further down the DOM, from the menu is always on top.
I've tried manually adding zIndex to various parts of the menu - but to no avail.
I suspect that the issue is something to do with the transition.
Can someone explain what's going on here, and how would I solve it?
I removed the disablePortal prop on the Popper component :
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
Which now becomes
<Popper open={open} anchorEl={this.anchorEl} transition>
See the Material-UI documentation for the Popper component disablePortal prop to see why:
Disable the portal behavior. The children stay within it's parent DOM hierarchy.
By default, the Popper component uses the React Portal API : https://reactjs.org/docs/portals.html
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component
Using the React Portal API, the Material-UI Popper component renders by default outside the DOM hierarchy of the parent tree, this explains why it resolves the overlaying issue.
The modified working code is on codesandbox.io
If anyone still looking to change z-index or if you want to keep disablePortal try the methods below.
Method 1
Give an id to Popper
<Popper id='popper-1' .... />
Now in your CSS file
#popper-1 {
z-index: 5; // or anything higher
}
Method 2
Set z-index in Popper itself using style prop
z-index working code (with disablePortal enabled) here
for me following solution worked: adding zIndex to popper.
<Popper style={{zIndex: 10000}} open={open} anchorEl={this.anchorEl} transition disablePortal>
for me removing disablePortal didn't work
As Suggested by #Ricovitch, remove disablePortal attribute from Popper element or set it's value to false
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>
As shown in the material-ui popper scroll playground example when disablePortal is false, the popup element is attached to body element, which is the default behavior. For example, your HTML structure will look like:
<body>
... existing elements ...
<parent>
<button onClick={openMenu}/>
</parent>
... more elements ...
... attached popup menu for Popper ...
</body>
However, when you set disablePortal to true, it will have following html structure:
<body>
... existing elements ...
<parent>
<button onClick={openMenu}/>
... attached popup menu for Popper ...
</parent>
... more elements ...
</body>
I hope this makes things clearer!
mobile stepper: 1000
speed dial: 1050
app bar: 1100
drawer: 1200
modal: 1300
snackbar: 1400
tooltip: 1500
<Popper style={{ zIndex: 1900 }} open={open1} anchorEl={anchorRef1.current} role={undefined} transition disablePortal>any thing in the popper </Popper>
I'm trying to use the material-ui tooltip. I want the tooltip to be displayed at the top.
Even after setting placement="top"
The demo can be found here
What am I doing wrong in here?
Because page has not enough space to show tooltip on top position
Just add simple padding then try it again.
<div style={{padding: '50px'}}>
<Tooltip placement="top" title="Chart Type">
<IconButton >
<ShowChart />
</IconButton>
</Tooltip>
</div>
If you use a form wrapper, the outlined variant contains a "pointer-event: none" property that would prevent the popover from getting any events.