I am trying to wrap a page in a React project in a material UI container but it squeezes in all my content with these weird margins. Here is what it looks like:
But I want it to look like this with full width:
Haven't been able to find any other resources explaining how to change the width of the container. Does anyone have any workarounds? I tried adjusting the width of the container to be 100vw but it was unresponsive to my CSS. Here is my code:
////BUY PAGE
import React from 'react';
import Container from '#mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';
import './Buy.css';
const Buy = () => {
return (
<Container>
<AppBar />
<Footer />
</Container>
);
};
export default Buy;
////CSS
.buy-container {
overflow-y: hidden;
width: 100vw;
}
You should be able to get the results you're looking for by setting the maxWidth property of Container to false e.g:
<Container maxWidth={false}>
<AppBar />
<Footer />
</Container>
Edit:
The maxWidth property determines the max-width of the container. The container width grows with the size of the screen. By setting it to false you can disable the maxWidth property.
https://mui.com/api/container/
You will need to add maxWidth={false} and disableGutters properties to the <Container/> component. Additionally, you should include the <CssBaseline/> component to reset the browser's CSS.
Example:
<>
<CssBaseline />
<Container maxWidth={false} disableGutters>
{children}
</Container>
</>
Container API
Name
Type
Default
Description
maxWidth
'xs', 'sm', 'md', 'lg', 'xl', false, string
Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.
disableGutters
bool
false
If true, the left and right padding is removed.
You should avoid to set the custom container width until changing the breakpoints.
Otherwise, you can use a custom div element or Box component.
// makeStyles
const useStyles = makeStyles(() => ({
root: {
height: '100%',
overflow: 'hidden',
width: '100%'
},
}));
// styled
const LayoutContainer = styled('div')(() => ({
height: '100%',
overflow: 'hidden',
width: '100%'
}));
I'd take a look at global css variables to overwrite the standard (see here):
The material docs suggest this way or using styling overrides which may be another option for you.
.MuiContainer-root {
width: 100vw;
padding-left: 0;
padding-right: 0;
}
FYI - I got the global css name from the Container portion of the docs under "root", in case you've not seen it.
I would use the <Container> within <Box>/<Appbar> that has the background color e.g:
<Box sx={{ bgcolor: 'black'}}>
<Container>
My content
</Container>
</Box>
minHeight: '100%' worked for me in that kind of situation
Related
I have a problem with react-native elements. I have one <Parent> component that is a View and I have one <Child> component as a child that is also a View. I would like that <Child> will always be 100% width and height of <Parent>. I know I can pass width: '100%' and height: '100%' but is it a good way of styling it? What is the best practice to setup parent and child and parent will define width and height and child will always be depending on the parent component?
for this , you can use flex for style like this :
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const Flex = () => {
return (
<View style={[styles.container, {
// Try setting `flexDirection` to `"row"`.
flexDirection: "column"
}]}>
<View style={{ flex: 1, backgroundColor: "red" }} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Flex;
for more info see this
This works fine(the icon is white and has the correct size):
// Logo definition
import { Icon } from '#ui-kitten/components'
const Logo = props => <Icon {...props} name='logo' pack='app' />
// index.js
<Logo style={{
width: 200,
height: 200,
tintColor: theme["basic-color-100"]
}}/>
Then, I turned the element into a styled-component:
// index.js:
<StyledLogo />
// styles.js
export const StyledLogo = styled(Logo)`
width: 200px;
height: 200px;
tint-color: ${({theme}) => {theme["basic-color-100"]}
`
NOTE: if I change StyledLogo's color using inline style, it doesn't work neither
tint-color property is now completely ignored (the icon has the right size, but is completely black). How can I solve it?
I have this code, which, for some reason, will grow when I resize a window, but not shrink. I was wondering how to remedy this.
https://codesandbox.io/s/react-chartjs-2-example-1nur4
import React from "react";
import { render } from "react-dom";
import LineDemo from "./LineDemo";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const App = () => (
<div style={styles}>
<table style={{ width: "100vw", borderCollapse: "collapse" }}>
<tbody>
{Array.from({ length: 4 }, el => "foo")
.concat(<LineDemo />)
.map(el => (
<td style={{ border: "solid" }}>{el}</td>
))}
</tbody>
</table>
</div>
);
render(<App />, document.getElementById("root"));
Have a detailed look at https://www.chartjs.org/docs/latest/configuration/responsive.html. The Important Note section mentions how responsiveness can be achieved. It states that
Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size.
In your case, the parent container for the line chart is the <div> element. The render function of LineDemo component in LineDemo.js file then can be modified to look like:
render() {
return (
<div style={{ position: "relative", margin: "auto", width: "80vw" }}>
<h2>Line Example</h2>
<Line ref="chart" data={data} />
</div>
);
}
Here is a working example: https://codesandbox.io/s/react-chartjs-2-example-hzygw
What worked for me was to add chart container a width style:
<div style={{width: '99%'}}>
<Bar options={options} data={data} />
</div>
However if I set width 100% it won't work lol
I'm currently displaying a background image on my React Native app using the following code:
<ImageBackground
source={myImage}
style={{ width:'100%', height:'100%' }}
imageStyle={{resizeMode: 'contain'}}
>
....
</ImageBackground>
I don't want my image to stretch and the resizeMode: 'contain' does perfectly this job. In this way the image won't cover all my screen but only a portion of it and this is exactly what I want to achieve.
My issue is that the image is vertical aligned at the center with the code I shown above while I would like it to stick at the top. So it should keep proportions and stick at the top. I tried to use position:'absolute' and top:0 in the imageStyle property but it doesn't work.
I saw this question which apparently explain my same problem but it doesn't provide a solution to my issue.
Do you have any suggestion?
try this:
import {Dimensions} from 'react-native'
constructor(props) {
super(props);
this.state = { height: 0 };
}
componentDidMount(){
Image.getSize(imgUrl, (srcWidth, srcHeight) => {
const maxHeight = Dimensions.get('window').height;
const maxWidth = Dimensions.get('window').width;
const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
this.setState({ height: srcHeight * ratio})
})
}
<ImageBackground
source={myImage}
style={{ flex:1 }}
resizeMode= 'contain'
imageStyle={height: this.state.height, width:Dimensions.get('window').width}
>
....
</ImageBackground>
ImageBackground as the same props as Image so resizeMode is a prop not a style
See this: https://facebook.github.io/react-native/docs/imagebackground
I achieved a similar effect using static height and resizeMode cover
<ImageBackground
style={{ flex: 1 }}
imageStyle={{ height: 300 }}
source={{ uri: entity.picture }}
resizeMode="cover"
>
...
</ImageBackground>
Hey I don't really get what exactly you need to do, try this
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(background.jpg) no-repeat;
/* background-size: cover; */
}
I have my App.js class which renders as
const theme = createMuiTheme({
palette: {
primary: lime,
secondary: {
...grey,
A400: '#00e677'
},
error: red
}
});
class App extends Component {
render() {
const classes = this.props.classes;
return (
<div className={classes.root}>
<MuiThemeProvider theme={theme}>
<MyApp/>
</MuiThemeProvider>
</div>
);
}
}
export default withStyles(styles)(App);
my root class has this style
const styles = theme => ({
root: {
width: '100%',
height: '100%',
marginTop: 0,
zIndex: 1,
overflow: 'hidden',
backgroundColor: theme.palette.background.default,
}
});
I thought that by setting height:'100%' I'd had all my window filled, the problem is that I've got a blank space (wrt the grey background) below the MyApp's div, see attached image.
How can I force the background color to fill 100% of the window?
Instead of using height:100% you may try height:100vh. Using % is relative to the parent height but using vh is relative to the height of the viewport. So making 100vh will ensure that the block fill all the height of the screen.
You can read more about here
This is a version of Temani Afif's answer.
I use Grommet within React.
To fill the whole screen with my theme background (dark!) I styled the style provider HOC thus:
import styled from 'styled-components';
FillGrommet = styled( Grommet )`min-height: 100vh;`;
then, in render() I wrote:
return (
<this.FillGrommet theme={ dark }>
<AppBar /
...
It is recommended to apply the style outside render() for performance reasons.
html {
background-color: *color of your choice*,
}
This changes the whole background past 100vh and 100vw.