I'm trying to have a simple bar in which I will put a logo, and below, a drawer. The problem is when I open the drawer, the simple bar moves with it. Besides, I can see the logo text is hidden by drawer.
I've tried to add zIndex to the simpleBar but it doesn't work. I'm really not familiar with react and material ui so don't see how to fix my problem.
Here's my codesandbox https://codesandbox.io/embed/sharp-browser-lsolr?fontsize=14 , if anyone can help.
I'm sorry, when clicking on my codesandbox, you'll see an error I don't get 'cause my code comes from material-ui and I don't see what the problem is.. Just click on the cross to close it.
Many thanks in advance !
Try this: https://codesandbox.io/s/sad-matsumoto-c84r8
The SimpleAppBar component was removed, and the MiniDrawer component which already has an AppBar has been modified so that everything looks right and you can put your logo where you want it.
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
For some reason my react-tooltip tooltips are not the same as everybody else's. I'm guessing some of my css is probably interfering with the tooltips but I can't figure out what it is.
this is what it looks like:
As you can see the 'arrow' part of the tooltip is not smooth and has a weird rugged effect.
When I try my code in the demo sandbox it does not look like this
Any help as to what could be causing this is very welcome!
Okay so the problem was that multiple "ReactTooltip" components were being loaded and were stacking on top of eachother... so make sure you only have one ReactTooltip being rendered!
I am using ant design with react for my project
when I am using the tooltip component, and I hover over the element, the tooltip appears and the scroll bar for a half-second and then disappears.
as you can see in this video https://youtu.be/Tyg61JVDgRc
anybody knows why?
at the moment the problem is only with ant design tooltip component, and is bugging and not following the position : 'fixed' so handing it to overlayStyle prop manually will fix the problem like <Tooltip overlayStyle={{position:'fixed'}}/>, I hope this helps. if youre still in trouble pass destroyTooltipOnHide propery
New with react here. I love the defi world so I'm trying to fork the PancakeSwap frontend from GitHub.
I already figure out how to add my own styling to it, changed de menu items, etc. The only problem I have, is I cant figure out how to change the href of the icons on the footer (Twitter and Telegram).
Anyone can help me? Probably is very easy but I am stuck.
Thanks!
In my case, I just had to hide the entire footer to hide those links. There is one more suggestion which can solve your problem to some extend.
On the file views/App.tsx,
you may remove the Menu call.
This removes the header and footer from the pages. But it is easy to reconstruct a new custom Menu like headerbar with the UIKit.
I have searched across the files and I was able to hide only the footer links and not the social icons.
The footer links can be hidden by not passing footerlinks on the Menu component at ./components/Menu/index.tsx:
return (
<UikitMenu
.
.
// footerLinks={footerLinks(t)}
.
.
/>);
Or, you may use the Menu component from a UIKit fork at https://github.com/nguyenphu27/pancake-toolkit-testnet. The previous builds was not having a footer and hence this UIKit is not having a footer.
Sorry, I was not able to find a perfect solution within the same UI library.
So, I am using a similar code snippet as provided here(Material UI) :
Code sandbox
When we click on the top left menu icon, it opens the side drawer which shrinks the main body, I wanted it to be able to come on top of the main body, sort of like overlay you can say. I tried changing the z-index but that didn't seem to work. Will really appreciate some help
The official way to do this is use default value of variant (temporary) of Drawer component. In your example, variant you use is permanent.
Of course you need to change CSS a bit to adapt yourself.
API document here: https://material-ui.com/api/drawer/
Offical demo here also: https://material-ui.com/components/drawers/#temporary-drawer