I want to achieve a box of a minimum height of 500px and three cards vertically centered within this box.
The cards shall be spaced evenly but justifyContent="space-evenly" is not affecting at all.
Im using MUI v5 ("#mui/material": "5.10.4").
What am I doing wrong?
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justifyContent="center"
sx={{
minHeight: 500,
backgroundColor: '#f1f2f3',
'&:hover': {
backgroundColor: '#ffffff',
},
}}
>
<Grid item xs={12}>
<Grid container direction="row" justifyContent="space-evenly" alignItems="center" sx={{pt:10, pb:10}}>
<Grid item>
<Card sx={{
width: 300,
height: 400,
backgroundColor: "#030814",
}}>
</Card>
</Grid>
<Grid item>
<Card sx={{
width: 300,
height: 400,
backgroundColor: "#030814",
}}>
</Card>
</Grid>
<Grid item>
<Card sx={{
width: 300,
height: 400,
backgroundColor: "#030814",
}}>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>
Thanks!
Seems that in you parent Grid container the direction="column" is causing the issue. Either you need to set it to direction="row" or just remove it.
Here is the working codesandbox
<Grid
container
spacing={0}
// direction="column" // This is causing the issue
alignItems="center"
justifyContent="center"
sx={{
minHeight: 500,
backgroundColor: '#f1f2f3',
'&:hover': {
backgroundColor: '#ffffff',
},
}}
>
...
Related
I am using MaterialTable from material-table package. I want the the table to have scrollable on x-axis in order to deal with many columns. Below is the code:
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black'
},
}}
/>
What props should I pass to make the table scrollable on x-axis
The solution is to wrap the into the div with style as:
<div
style={{
width:'1535px',
overflowX:'auto'
}}
>
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black' ,
},
padding: "dense",
tableLayout: "block",
overflowX:"auto"
}}
/>
</div>
The div makes the boundaries limit for the page and hence the MaterialTable will have overflow on x-axis
I was trying to create an OTP screen with autofill functionality using the react-native-otp-inputs plugin. Everything is working fine, but when I try to add any button below this OTPInputs component the background colour of the button gets changed to a greyish one.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import OtpInputs from 'react-native-otp-inputs';
export function AuthenticationScreen({navigation}) {
useEffect(() => {
RNBootSplash.hide({duration: 250});
});
const otpRef = useRef();
const focusOTP = useCallback(() => {
otpRef.current.focus();
}, []);
const resetOTP = useCallback(() => {
otpRef.current.reset();
}, []);
return (
<View style={{backgroundColor: 'white', flex: 1}}>
<OtpInputs
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
paddingLeft: 30,
paddingRight: 30,
borderWidth: 1,
borderColor: 'blue',
}}
inputContainerStyles={{
borderWidth: 0,
borderBottomWidth: 1,
borderColor: 'black',
}}
inputStyles={{textAlign: 'center'}}
handleChange={(code) => console.log(code)}
numberOfInputs={6}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginVertical: 40,
borderWidth: 1,
borderColor: 'red',
}}>
<TouchableOpacity
style={{
height: 50,
width: 100,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Continue</Text>
</TouchableOpacity>
</View>
</View>
);
}
This happens only if the all the otp fields are filled. Please find the attached screenshot for a detailed view.
As you can see I haven't added any background colour to touchable opacity, still it is showing a grey colour after the otp inputs are filled. What may be the reason for this ?
Apparently when you end editing the OTP fields it changes the next touchable opacity.
As workaround you can add self enclosed touchable opacity with no width and height like this
<TouchableOpacity/>
And here is a full example with your code
Given below is the code which I coded using material ui.I'm still new to that area.I need to center my button.But it comes to the corner.Is there any problem in my code?
<Button className={clsx(classes.button)}
type="submit"
alignItems="center"
variant="contained">
{'Sign Up'}
</Button>
</div>```
button:{
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 8,
border: 0,
color: 'white',
height: 48,
width: "30%",
padding: '10px 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
justifyContent: 'center'
}
alignItems="center" does not work for me.
paper: {
textAlign: 'center',
color: theme.palette.text.secondary,
},
I enabled textAlign: 'center' and It fixed
justifyContent: 'center'
You can use justifyContent or AlignItems in
display:flex
mode. Otherwise you can use text-align: center or margin: auto to make your child element center.
I can't find any documentation on how to create an icon with rectangle backgrounds like here:
There are no props for <Icon /> or <SvgIcon /> that I can find that would do this out of the box. I can style them like that myself, but was wondering if there is an existing way.
You can use the useStyles to add colors to your elements:
const useStyles = makeStyles(theme => ({
root: {
"& > svg": {
margin: theme.spacing(1)
}
},
icon1: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon2: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius
},
icon3: {
backgroundColor: theme.palette.text.primary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon4: {
backgroundColor: theme.palette.text.secondary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
}
}));
And inside your icon:
<div className={classes.root}>
<AddIcon fontSize="large" color="primary" className={classes.icon1} />
<AddIcon fontSize="large" color="primary" className={classes.icon2} />
<AddIcon fontSize="large" color="primary" className={classes.icon3} />
<AddIcon fontSize="large" color="primary" className={classes.icon4} />
</div>
Here is a working example: https://codesandbox.io/s/mui-icons-styling-8t4rb?file=/demo.js
I am trying to create a login form like below on React Native:
I am having trouble creating a Form/ TextInput with solid border (don't worry about other CSS styling. I just need to get the solid border.)
Imports:
import { View, Text, TextInput } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements';
import { Container, Header, Content, Form, Item, Input, Label, Button } from 'native-base';
This is the style:
const styles = {
container: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
},
loginSquare: {
backgroundColor: '#FFFFFF',
height: 300,
width: 300,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center'
},
loginHeader: {
backgroundColor: '#660008',
width: '100%',
height: 75
},
loginText: {
color: '#FFFFFF'
},
loginForm: {
width: 250,
height: 50
},
loginButton: {
backgroundColor: '#660008'
},
loginForm: {
height: 75,
marginLeft: 25,
marginRight: 25,
borderColor: 'gray'
}
}
and code:
render(){
return (
<View style={styles.container}>
<View style={styles.loginSquare}>
<View style={styles.loginHeader}>
<Text style={styles.loginText}>Login</Text>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Email"
/>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Password"
/>
</View>
<View>
<Button block style={styles.loginButton}>
<Text style={styles.loginText}>Sign In</Text>
</Button>
</View>
</View>
</View>
The code sample above was my attempt using RN's TextInput component + pure CSS. I am also looking at NativeBase and RNElements (RNElements forms API: here, NativeBase forms API: here), but RN Elements does not mention anything about Text Input + Border, and while Native Base mentioned it, I tried, unsuccessfully:
<Form bordered>
<Item>
<Input placeholder="Username" />
</Item>
</Form>
What is one way I can create bordered input like the first screenshot?
If you want a border input then you need to add the borderWidth and borderColor prop to your TextInput style prop. The code for creating these 2 TextInput with border will be as below:-
<View style={{
justifyContent: 'center',
alignItems: "center"
}}>
<TextInput
style={{
borderWidth: 2, // size/width of the border
borderColor: 'lightgrey', // color of the border
paddingLeft: 10,
height: 75
}}
placeholder="Email"
/>
<TextInput
style={{
borderWidth: 2,
borderColor: 'lightgrey',
margin: 10,
height: 75,
paddingLeft: 10
}}
placeholder="Password"
/>
</View>
This will create your TextInput with your desired border :)
<View tyle={{flexDirectoin:'column',alignItems:'center'>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
</View>
Something roughly like this will do