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.
Related
I have been struggling with adding a link with the text 'here' to flow inline with the entire paragraph.
Essentially what I would like to do is
'Gibberish here detailing the required steps.'
How can I accomplish this so as to have everything in a single line? I have tried doing this but it gives me the results attached in the screenshot.
<Flex direction="column" gap="s">
GIBBERISHH{" "}
<Anchor
href=""
trackingId=""
label="Read the Walkthrough"
/>
detailing the required steps.
</Flex>
Edit: Also tried changing the Flex direction to a row but I get this result which is not what I need either. Any suggestions would be great!
Why not a "p" tag if it's a paragraph:
<p>
GIBBERISHH{" "}
<Anchor
href=""
trackingId=""
label="Read the Walkthrough"
/>
detailing the required steps.
</p>
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 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 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
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.