I am currently facing some problem about sidebar navigation. Every time I click the menu below the scrollbar went go to top again. I want it to steady like when I click the bottom menu it will stays its current view. Kindly check file below. Hope you can help me. or suggest another ways to redirect pages from sidebar Thanks.
{nav.nav &&
nav.nav.map((sub, subIndex) => (
<ListItem
key={subIndex}
button
component={NavLink}
to={sub.link}
end={true}
>
<ListItemIcon sx={{ minWidth: "40px" }}>
{sub.icon}
</ListItemIcon>
<ListItemText
primary={sub.name}
primaryTypographyProps={{
variant: "body2",
}}
/>
</ListItem>
))}
video gif
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
It does go to the correct page, however, how can I make a background effect or change the font color when the link is active? I tried a CSS with this and it does not work.
codesandbox:https://codesandbox.io/s/cocky-sun-xg80c5?file=/src/App.js
.active{
background-color: 'red';
}
{pages.map((page) => (
<Link
to={page.link}
spy={true}
smooth={true}
offset={-100}
duration={500}
activeClass="active"
key={page.id}
>
<Button
key={page.id}
sx={{
my: 2,
color: "black",
display: "block",
}}
>
{page.title}
</Button>
</Link>
))}
This is my json package:
Why would you wrapp a Button inside a Link Element ?
A Link is a semantic Element that links to another part of your page or an external page so I don't see a reason for nesting a button inside a link.
So I ended up with something like this and this works fine for me now:
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'm creating a react-native app using native-base library, and i'm using native-base list component for the side menu but i have a problem, i can't figure out how to make a submenu in my side menu, i need to be able to open a submenu with animation when a menu item is clicked.
The list is coded as follows:
<List>
<ListItem>
<Text>Menu 1</Text>
</ListItem>
<ListItem>
<Text>Menu 3</Text>
</ListItem>
<ListItem>
<Text>Menu 2</Text>
</ListItem>
</List>
But i want to add a submenu to it, for example if i click on Menu 1 a submenu with sub1 sub2 fade in.
Here's an example in a video of the result i want:
http://res.cloudinary.com/atf19/video/upload/v1500308199/AwesomeScreenshot-2017-07-17T16-14-52-723Z_wymybj.webm
I tried using another list inside my actual list but it just mess up the design, i looked for react native plugin that manage this kind of problem but i didn't find any.
PS: please be advice that the list items are created dynamically from a server.
The possible workaround:
You could have ListItems at the same level created dynamically.
So if you click Menu1. You fetch the data and when ready:
<List>
<ListItem>
<Text>Menu 1</Text>
</ListItem>
<ListItem>
<Text>ITEM 1</Text>
</ListItem>
<ListItem>
<Text>ITEM 2</Text>
</ListItem>
...
<ListItem>
<Text>Menu 3</Text>
</ListItem>
<ListItem>
<Text>Menu 2</Text>
</ListItem>
</List>
And of course have a different style for each of this "child" items. In order to simulate the expected result.
I have done it with HTML components not RN yet. But the idea is the same.