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>
Related
I'm following along with the MUI docs on how to override disabled in a child component. The problem I'm having is that I have a FontAwesomeIcon as my icon for my Tab. I want to display a tooltip with on hover, but clearly I'm doing something wrong here.
The code looks something like this:
<TabList
<Tab
disabled
icon={
<Tooltip title="I'm a tooltip">
<span>
<FontAwesomeIcon icon{regular{"check"}} />
</span>
</Tooltip>
}
</Tab>
</TabList>
The tooltip isn't showing up on hover for me because it's disabled by the tab, but putting a span in there doesn't seem to fix anything. I also tried a hacky version of this solution, but couldn't get it to work. Any help would be appreciate it.
By default, a disabled tab will not trigger user interaction. This can be disabled using styling on the Tab itself:
export default function MuiHoverTab() {
return (
<>
<Tabs>
<Tab
disabled
icon={
<Tooltip title="I'm a tooltip">
<span>Disabled but broken</span>
</Tooltip>
}
/>
<Tab
style={{ pointerEvents: "auto" }}
disabled
icon={
<Tooltip title="I'm a tooltip">
<span>Fixed using styling</span>
</Tooltip>
}
/>
</Tabs>
</>
);
}
Here's a sandbox to see it in action: https://codesandbox.io/s/mui-hover-tab-tooltip-52p3dt?file=/src/App.js
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'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.
What I am doing:
I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:
<List>
<ListItem button component="a" href={infoUrl}>
<ListItemAvatar>
<Avatar src={itemIcon} />
</ListItemAvatar>
<ListItemText
primary={this.props.project.name_with_namespace}
secondary={this.props.project.description}
/>
<ListItemSecondaryAction>
<Tooltip id="button-report" title="Report">
<IconButton area-label="Report" href={reportUrl}>
<AssessmentIcon />
</IconButton>
</Tooltip>
<Tooltip id="button-codeRepo" title="Code Repository">
<IconButton area-label="Code Repository" href={repoUrl}>
<CodeIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
</List>
Problem:
The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".
The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.
If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.
Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.
Just add parent div and try to apply tooltip on that; it worked for me:
<Tooltip title="delete" placement="start-top">
<div>
<AiOutlineDelete style={{ fontSize: '30px', alignSelf: 'center' }}/>
</div>
</Tooltip>
Put the Tooltip around the Icon, not the Button:
<IconButton area-label="Report" href={reportUrl}>
<Tooltip id="button-report" title="Report">
<AssessmentIcon />
</Tooltip>
</IconButton>
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.
i am using semantic-ui (via react-semantic-ui). i want a little area for logon in the bottom of my menu column.
i have this:
i want this:
i did the above using position: absolute; bottom: 0, but i'm betting there's a semantic positioning class or react-semantic-ui component to use that would achieve it w/out manual styles
my components are as follows:
<Menu vertical fixed={'left'} inverted>
<Menu.Item name='account' active />
<Menu.Item name='settings' active={false} />
<Menu.Menu>
<img width="50px" height="50px" style={{ backgroundColor: 'red' }} />
<Menu.Item name='logout' active={false} onClick={() => null} />
</Menu.Menu>
</Menu>
I would use the Segment element. The attached prop is what you'll find most useful and you can easily customize it to become a full menu.
<Segment attached='bottom'></Segment>
You should easily be able to cusomize this to fit your stylistic needs.