working with Material UI Grid, this has oversize full screen and generate horizontal scroll bar, how to can fix it ?
const styles = theme => ({ root: { flexGrow: 1,}, paper: { padding: theme.spacing.unit * 2,textAlign: 'center',color: theme.palette.text.secondary,},});
generate like horizontal scroll bar
I had the same problem. Find out that using minHeight: "100vh" solves this problem
root: {
minHeight: "100vh",
}
where i found this solution
the bellow worked too:
root: {
position: 'fixed',
width: '100%',
height: '100%',
left: 0,
top: 0,
zIndex: 10,
}
where i found this solution
After too much test, I get solve this problem, change spacing 24 to 16, because childs has 12, I hope this helps someone
<Grid container spacing={16}>
Without horizontal scroll bar
Related
<Box
paddingX={4}
mt={3}
sx={{
backgroundColor: "#fff",
width: 600,
height: 220,
border: "1px solid #e1e1e1",
overflow: 'auto',
'&::-webkit-scrollbar': { display: 'none' }
// '&::-webkit-scrollbar': { width : 0 },
}}
>
Here is a piece of code i tried but nothing happens
i need to hide scroll bar
In my case I had a MUI Dialog component, where the Dialog Content was overflowing:
Which as a result placed a scrollbar in the Dialog.
Ended up overriding the sx prop of the Dialog component to look something like this:
sx={{
'& .MuiDialogContent-root::-webkit-scrollbar': { display: 'none' },
'& .MuiDialogContent-root': {
'msOverflowStyle': 'none',
'scrollbarWidth': 'none',
},
}}
Which applies styles to the Dialog Content via its CSS class.
I covered the use case for all major browsers, reference here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
In your particular example, I recommend tracking down where the overflow happens and then applying this from the parent component.
Hope this helps :)
First of all, I have tested all possible solutions I have founded and I still didn't solve my problem.
I want to put a shorter height in my material-table rows. This is what it looks like right now.
Table
I would like my rows to have a height similar to the headers in that image. I have tried many things, one of them was the following:
options={{
headerStyle: {
whiteSpace: "nowrap",
height: 20,
maxHeight: 20,
padding: 0
},
rowStyle: {
height: 20,
maxHeight: 20,
padding: 0
},
}}
I would really appreciate it if someone can help me.
You can set options in material-table
options={{
padding: "dense",
}}
I had the same problem with React Material-Table. I fixed adding this in the global index.css of the project:
.MuiTableCell-root {
padding: 0 14px !important;
}
and then i could modify the height in the rowStyle in the options of the Material-Table component:
options = {
rowStyle: {
height: "20px"
}
}
you need to use withStyles and update the specific element class style, so it will reflect to all the elements. Check the working example as you expected here : codesandbox
import MuiTableCell from '#material-ui/core/TableCell';
const TableCell = withStyles(theme => ({
root: {
height: 10,
padding:0
}
}))(MuiTableCell);
Much more simplified, overwrite padding of 16px to smaller size...<TableCell style={{padding:5px}} ...>.
I think the link below might be helpful for you.
customizing material ui table
I'm new to React Spring and I initially tried this
const strikeProps = useSpring({
textDecoration: "line-through",
from: { textDecoration: "none" },
});
But it's not working. I think there should be a way simulate the CSS solution for this.
The problem here is, that the original CSS solution is uses pseudo element for emulating the strike trough. We can only add react-spring properties for normal html elements. So the most compact way is to create a separate strike through component for this problem. For example:
const StrikeTroughtText = ({ children, weight = 1 }) => {
const props = useSpring({
from: { width: "0%" },
to: { width: "100%" }
});
return (
<div style={{ position: "relative", display: "inline-block" }}>
{children}
<animated.div
style={{
position: "absolute",
top: "50%",
left: 0,
width: props.width,
height: `${weight}px`,
background: "black"
}}
/>
</div>
);
};
We basically animate the width of the absolutely positioned div containing a black line over the text.
You can use it like a div component:
<StrikeTroughtText>text</StrikeTroughtText>
For bigger font size the default 1 px line weight is not enough, so I added a weight property also.
Here is my example: https://codesandbox.io/s/react-strike-trought-text-component-with-react-spring-animation-86cfd?file=/src/App.js
In my React Native app, I have a red box of height 300 that I want to center vertically, and an image that I want to sit inside and at the top of this red box. Here is my code so far:
import React, { Component } from 'react';
import { View, Image} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<View
style={{
borderWidth: 3,
borderColor: 'red',
width: "100%",
height: 300
}}
>
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
height: "100%",
resizeMode: "contain",
borderWidth: 3
}}
>
</Image>
</View>
</View>
);
}
}
Here's what this looks like:
The red box is the outer box I mentioned, and the black box is just the border of the Image. The problem is that this black box (ie the Image) expands to fill the red box vertically, and the image is vertically centered inside this black box, so it's vertically centered inside the red box, as opposed to at the flex-start position that I want it at. I've tried adding justifyContent: flex-start and flexShrink: 1 to the Image and neither has made a difference.
Does anyone know how I can approach this?
NOTE:
If I remove the height: 100% on the Image, I get this:
UPDATE:
To clarify, this is what I'd like it to look like. I've removed the black border here. I moved it up to where I want it by adding top: -95, but this won't work in general because the value would be different for different devices:
try doing like this
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
borderWidth: 3
}}
resizeMode={"contain"}
/>
There is a difference between Image (the view) and the content of that image. On your screenshot, the image view has the black border and its content is sitting inside of it. Because they have different aspect ratios, there is going to be either a blank space or cut-off on the content. You can't adjust position of the content as it's not laid out on flex basis. Image view is just a window that then renders image content. There is no property to tell Image where to align that content
Your problem comes from the fact that screen width differs, and aspect ratio of your container also differs (variable width but constant 300 height). What you need to do is
measure container width
determine proper aspect ratio for the image based on image resource width and height
set your image width to 100% and its height according to received aspect ratio
here, my image dimensions are 1005 * 219:
const Test = () => {
const [width, setWidth] = useState(0);
return (
<View>
<View
onLayout={e => setWidth(e.nativeEvent.layout.width)}
style={{ width: '100%', height: 300, borderWidth: 1 }}>
<Image
style={{
width: '100%',
height: (width / 1005) * 219,
borderWidth: 1,
borderColor: 'red',
}}
source={require('...')}
/>
</View>
</View>
);
};
Is there a clear/easy way to control Tooltip's distance from the anchor element? The default positioning does not fit well for my case, the tooltip is too close to the anchor. I have checked all the props of it and PopperProps no visible option to do that.
You can customize the tooltip's margin using withStyles.
In my case (Material-UI 3), the tooltip was too far away from the anchor.
Here is what I needed :
const StyledTooltip = withStyles({
tooltipPlacementTop: {
margin: "4px 0",
},
})(Tooltip);
I targeted tooltipPlacementTop because it was the rule name when using the placement="top" prop.
You can find the adequate rule names in the Tooltip API documentation.
Last tip: I used the PopperProps={{ keepMounted: true }} prop to see in my navigator's inspector what CSS was applied to the tooltip.
Hope it helps.
For Material-UI V.5 it could be done like this:
<Tooltip
PopperProps={{
modifiers: [
{
name: "offset",
options: {
offset: [50, 0],
},
},
],
}}
.......
Follow up with Hugo's suggestion, since the tooltip position is absolute, instead of changing the margin I changed the anchor position by adjusting the properties right and top like so:
const StyledTooltip = withStyles({
tooltipPlacementTop: {
right: "1px",
top: "8px",
},
})(Tooltip);
It works as I expected. You can use left or right to adjust the tooltip horizontal position accordingly.
I was using material ui styled to adjust my tooltip properties. I used the normal theme which is available in the MUI documentation.
const LightTooltip = styled(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11
},}));
I tried to adjust the position property with Mui styled, but it wasn't working.
I fixed it with my external style sheet.
.MuiTooltip-popper {
inset: -25px auto 0px auto;}
In Material-UI v4, you can add margin via style prop in the PopperProps.
<Tooltip
placement="bottom"
title="hello"
PopperProps={{ style: { marginTop: -12 } }}
>
<div>Some text</div>
</Tooltip>
I'm using Material-UI 4.x version and changed tooltip distance from the anchor using following style
const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: { // this part will change the distance
margin: '4px 0',
},
}))(Tooltip)
you can set it through the style prop
<Tooltip style={{ padding: '4px 0'}} > {children} </Tooltip>