I first came across this when implementing my own CustomTooltip, but I think this might actually be a recharts bug, as even the codesandbox example from the documentation site has the same issue. If you remove 'content={< CustomTooltip />}' from line 110 on that codesandbox, you'll turn the tooltip into a basic one, which will look like this:
But when you put that piece back in so that it's what the documentation has as an example for a CustomTooltip, the background (for lack of a better term) of the tooltip disappears.
Does anyone know if this is a recharts bug, or maybe I'm just doing something wrong? I just want to get my Custom Tooltip to have the same visual look as the basic one
I figured it out. As rahuuzz said, providing custom content for the tooltip also overrides the base styling, so that has to be provided. My tooltip in my chart now looks like this:
<Tooltip
content={<CustomTooltip />}
wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", paddingLeft: "10px", paddingRight: "10px" }}
/>
Basically just had to add the wrappedStyle prop with some basic styling. Hopefully this helps someone else googling in the future
In your codesandbox you are importing styles.css but It doesnt contain any styles for custom-tooltip class.
When you provide custom content for the tooltip you have to define the styles yourself. When content prop is omitted, the package sets the style internally to the tooltip.
Related
I am using material ui ,I want to fix the left side fix and right side scrollable but its not working.I am trying in this way....
<Stack direction="row">
<Box sx={{ position: "fixed", width: "25%" }}>Left-side box content</Box>
<Box sx={{ overflow: "scroll", width: "75%" }}>Right-side box content</Box>
</Stack>
Thanks in advance...
It sounds like you are trying to create a layout where the left side of the page is fixed and the right side is scrollable. To do this with Material-UI, you can use the Grid component to create a two-column layout, and set the style property of the left column to { position: 'fixed' } and the right column to { overflow: 'auto' }.
You can also use grid-template-columns: fixed-value auto in CSS to achieve this.
It is important to note that you will likely need to adjust the widths of the columns and the container to make sure everything fits correctly on the screen.
It is also possible that you are facing some other issue, please provide more details about your code and the exact problem you are facing, so i can help you in a better way.
I'm using this re-resizable library to achieve the resize functionality. The requirement is to achieve the one-side resizing, which means if I resize from the right side of the div, only that side should expand to the right. The left side should stay in the same position.
I've read the docs and played around with the props but no luck. Thank you.
Here is my codesandbox.
You can use the handleClasses prop to apply css class names to particular sides. For example if you want to resize from only the right side, you can do the following:
.pointer-events-none {
pointer-events: none;
}
<Resizable
handleClasses={{
top: "pointer-events-none",
bottom: "pointer-events-none",
left: "pointer-events-none",
topRight: "pointer-events-none",
bottomRight: "pointer-events-none",
bottomLeft: "pointer-events-none",
topLeft: "pointer-events-none",
}}
>
<YourComponent />
</Resizable>
By excluding the right property in the handleClasses object you are disabling the pointer events on every side except the right side.
Your problem is the way you trying to combine Draggable and Resizable. As Resizable only changes the width of the container you must adjust the position(either with translate or left) when resizing from left or right to simulate div stays in place.
But instead of re-resizable I suggest using react-rnd. I think it is from the same author so the interface should be similar but this is already implemented there, you only have to use one component like this:
codesandbox
You can use react-rnd, which does basically what you're doing here behind the scenes - only in a working implementation. If it doesn't work out of box for you, then you can at least study its code.
https://github.com/bokuweb/react-rnd/blob/36d3506f91375a0b4dbade1187a61038d5c4892b/src/index.tsx#L636-L685
https://github.com/bokuweb/react-rnd
Do note that the library hasn't been updated in a long while - so if you rely on it, you're going to be on your own for ongoing maintenance.
I am trying to use this library for charts in React:
https://nivo.rocks/
I have copied the exact same example in the docs for the horizontal column chart (bar chart) but on my env, the legends are simply not shown.
I have looked for all other issues previously posted concerning labels not showing up and legend's problems troubleshoot. But this is a different issue. it just doesn't work as expected / as shown in the documentation live preview
CodeSandbox showing the problem:
https://codesandbox.io/s/missing-legends-text-pns6v
There is a div tag that looks like this:
<div style={{ width: "80%", height: "400px", color: "white" }}>
The colour is set to white. Remove that, and the text will display.
I am trying to customize the paper component to have a width of the full viewport. To be very frank I have a lot such problems if I try to customize any small details.
What I want to be able to do is customize the css that is being shown in the inspect element. In this particular case customize MuiBox-root-138 to have a padding of 0.
const styles = theme =>({
root:{
padding: 0,
width:"100%"
}
});
This doesn't work
What would be the elegant way of manipulating inner components of a MUI component.
Thanks!
I had the same issue, I tried different ways and this worked:
minWidth:"100% !important",
maxWidth:"100% !important",
I'm not sure if it's the same for you but it works.
New to React and MUI, and having a UX issue where when we have a popover (dropdown menu, or autoselect dropdown) we can still scroll the main body of the site. I see that its fixed in the new beta V1 for MUI, but using the current stable release, Ive been asked to see if we can hack it up to stop the scrolling - but I cant seem to target/catch anything when we have a popover appear.
Examples: Current MUI - http://www.material-ui.com/#/components/auto-complete
V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/
So, if you were to input something in those examples and trigger the downdown/popover, youll see that in the current MUI, you can still scroll the
I was hoping someone may have had this issue and had a solution they'd like to share?
Thanks guys!
I had a similar problem and solve it using 'disablePortal' Autocomplete property:
You can take a look at 'disablePortal' definition in here:
https://material-ui.com/api/autocomplete/#props
disablePortal: Disable the portal behavior. The children stay within it's parent DOM hierarchy.
I also had to add some styles to get pop up get positioned relative to input component.
Here is some sort of example:
const useStyles = makeStyles({
popperDisablePortal: {
position: 'relative',
}
})
const classes = useStyles()
<Autocomplete
classes={classes}
disablePortal={true}
{...props}
/>
So you may have to:
set up disablePortal property
define associated popperDisablePortal style with 'relative' position
EDIT: actually this error should not happen as part of default MUI Autocomplete set up. In my case, the error was some conflicting CSS property that was generating this scroller bug. Not sure in your case, but to me it happens to be some overflow: auto property defined on page HTML tag (sometimes you can find it on body tag). Replace with overflow: 'visible' and scrolling error should be gone without even changing one line of autocomplete component definition.