I can center a content horizontally (left-right) by doing justifyContent: 'center' on the parent element. However, doing alignItems: 'center' does absolutely nothing, The content is still sticking to the top, when it should be in the center of the screen.
const DisplayQuiz = () => {
const classes = useStyles();
return (
<Box className={classes.main}>
<Box>a</Box>
<Box>a</Box>
<Box>a</Box>
<Box>a</Box>
</Box>
)
}
main: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
Your content are already centered. They are centered inside their parent that is the outer box.
The outer box has no height attribute, so it will occupy height space just enough to cover it's content.
Thus, Your flex container needs to have height attribute:
const DisplayQuiz = () => {
const classes = useStyles();
return (
<Box className={classes.main}>
<Box>a</Box>
<Box>a</Box>
<Box>a</Box>
<Box>a</Box>
</Box>
);
}
main: {
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
Related
I have a large grid and would like it to dynamically resize the visible (they are virtualized) columns on horizontal scroll, but I can't seem to make it consistent since it tries to resize before the grid is fully rendered or something...
const App = () => {
const gridOptions = useMemo<GridOptions>(
() => ({
suppressColumnVirtualisation: false,
suppressRowVirtualisation: false,
processRowPostCreate: (params: ProcessRowParams) => {
console.log('processRowPostCreate');
const cols = [];
params.columnApi
.getAllDisplayedVirtualColumns()
.forEach((col) => cols.push(col));
params.columnApi.autoSizeColumns(cols, false);
},
}),
[]
);
const data = useMemo<any[]>(() => {
console.log('Create random data');
return createRandomGridData(100, 200, { resizable: true });
}, []);
const onVirtualColumnsChanged = (event: VirtualColumnsChangedEvent) => {
console.log('onVirtualColumnsChanged');
const cols = [];
event.columnApi
.getAllDisplayedVirtualColumns()
.forEach((col) => cols.push(col));
event.columnApi.autoSizeColumns(cols, false);
};
return (
<div className="ag-theme-alpine" style={{ height: '98vh', width: '98vw' }}>
<AgGridReact
gridOptions={gridOptions}
rowData={data[0]}
columnDefs={data[1]}
enableRangeSelection={true}
enableFillHandle={true}
suppressClearOnFillReduction={true}
onVirtualColumnsChanged={onVirtualColumnsChanged}
/>
</div>
);
};
Here is a live StackBlitz example: https://stackblitz.com/edit/react-ts-dwx6h7?file=App.tsx. The problem is that the grid is not auto-sized on start and when I scroll really fast it doesn't keep up.
What can I do to make it auto-size the columns more consistently?
I'm trying to implement the Facebook login in my react native application.
I'm following this tutorial : https://dev.to/rishikeshvedpathak/react-native-login-with-facebook-4mmi
and that's working great, I have the Facebook login button and everything works.
But he did it in a function and I want to implement it into a component.
I have a component with a Facebook login button and I want this button to call the FacebookLogin function from my Facebook.js file which contains the code from the tutorial above.
I tried to import it like this:
import App from './Facebook.js'
and then call the function like this using the 'onPress' in my TouchableOpacity:
App.FacebookLogin, but nothing worked.
Here is the code from the tutorial:
import React, { useState } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ActivityIndicator } from 'react-native';
import * as Facebook from 'expo-facebook';
console.disableYellowBox = true;
export default function App() {
const [isLoggedin, setLoggedinStatus] = useState(false);
const [userData, setUserData] = useState(null);
const [isImageLoading, setImageLoadStatus] = useState(false);
facebookLogIn = async () => {
Facebook.initializeAsync('My_App_id', 'My_App_name');
try {
const {
type,
token,
expires,
permissions,
declinedPermissions,
} = await Facebook.logInWithReadPermissionsAsync('My_App_id', 'My_App_name', {
permissions: ['public_profile'],
});
if (type === 'success') {
// Get the user's name using Facebook's Graph API
fetch(`https://graph.facebook.com/me?access_token=${token}&fields=id,name,email,picture.height(500)`)
.then(response => response.json())
.then(data => {
setLoggedinStatus(true);
setUserData(data);
})
.catch(e => console.log(e))
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
logout = () => {
setLoggedinStatus(false);
setUserData(null);
setImageLoadStatus(false);
}
return (
isLoggedin ?
userData ?
<View style={styles.container}>
<Image
style={{ width: 200, height: 200, borderRadius: 50 }}
source={{ uri: userData.picture.data.url }}
onLoadEnd={() => setImageLoadStatus(true)} />
<ActivityIndicator size="large" color="#0000ff" animating={!isImageLoading} style={{ position: "absolute" }} />
<Text style={{ fontSize: 22, marginVertical: 10 }}>Hi {userData.name}!</Text>
<TouchableOpacity style={styles.logoutBtn} onPress={this.logout}>
<Text style={{ color: "#fff" }}>Logout</Text>
</TouchableOpacity>
</View> :
null
:
<View style={styles.container}>
<Image
style={{ width: 200, height: 200, borderRadius: 50, marginVertical: 20 }}
source={require("../assets/logo_yorder.png")} />
<TouchableOpacity style={styles.loginBtn} onPress={this.facebookLogIn}>
<Text style={{ color: "#fff" }}>Login with Facebook</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e9ebee',
alignItems: 'center',
justifyContent: 'center',
},
loginBtn: {
backgroundColor: '#4267b2',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20
},
logoutBtn: {
backgroundColor: 'grey',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20,
position: "absolute",
bottom: 0
},
});
And here is the TouchableOpacity from my component :
<View style={styles.connexionServices}>
<TouchableOpacity style={[styles.connexionFacebook, styles.connexionCommon]}>
<Text style={styles.textButton}>Facebook</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.connexionGoogle, styles.connexionCommon]}>
<Text style={styles.textButton}>Google</Text>
</TouchableOpacity>
</View>
Here it is, I would like to implement Google login too so if you have some tips, it would be nice.
PS : I'm using react-native-cli: 2.0.1 and react-native: 0.61.4 with expo 3.18.6
OK I did it, i juste declared the function before the component declaration so i can call it in my component. It was a little tricky to call some of the functions in my component in the function but everything work now and i can log to facebook throught my Login component !
I wanna edit the width and height of my material-ui fab button. I have tried to change it by using classname and applying styles. The width changes but my problem is that the height doesn't.
This is the css code:
const dashboardStyles = makeStyles(theme => ({
infoButton: {
height: '20px',
width: '20px'
}
}));
It changes the width but doesn't change the height. Thanks for any help.
You can use material-ui makeStyles:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Fab from "#material-ui/core/Fab";
import AddIcon from "#material-ui/icons/Add";
const useStyles = makeStyles(theme => ({
fab: {
width: "80px",
height: "80px"
}
}));
export default function FloatingActionButton() {
const classes = useStyles();
return (
<Fab className={classes.fab}>
<AddIcon />
</Fab>
);
}
Is there something I can use in/with IconButton to define a label below the icon?
Maybe something similar to BottomNavigationAction but without it having to be inside of a BottomNavigation.
You can add your label as a direct child of the IconButton (sibling of the Icon itself), and override the IconButton-label style to have flexDirection: column
import React from 'react';
import {IconButton} from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import SaveIcon from '#material-ui/icons/Save';
const useStyles = makeStyles(theme => ({
iconButtonLabel: {
display: 'flex',
flexDirection: 'column',
},
}));
export default function IconButtonWithLabel() {
const classes = useStyles();
return (
<IconButton classes={{label: classes.iconButtonLabel}}>
<SaveIcon/>
<div>
hello
</div>
</IconButton>
);
}
According to docs, material-ui supports persistant drawer.
But my expected behaviour is a clipped persistant drawer like the photo.
My Sidebar component:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Face from 'material-ui-icons/Face';
import Person from 'material-ui-icons/Person';
import Assignment from 'material-ui-icons/Assignment';
import NavLink from 'react-router-dom/NavLink';
import { FormattedMessage } from 'react-intl';
import styles from '../../../../style/components/global/Sidebar.scss';
const cx = require('classnames/bind').bind(styles);
const rootStyles = theme => ({
list: {
width: 250,
flex: 'initial',
},
drawer: {
top: 30,
},
});
class UndockedDrawer extends Component {
render() {
const { classes } = this.props;
const sidebarListItems = (
<div>
<NavLink
to="/users"
className={cx('noStyle')}
>
<ListItem button>
<ListItemIcon>
<Person />
</ListItemIcon>
<ListItemText primary={<FormattedMessage id="user" />} />
</ListItem>
</NavLink>
</div>
);
const sidebarList = (
<div>
<List className={classes.list}>
{sidebarListItems}
</List>
</div>
);
return (
<div>
<Drawer
open={this.props.open}
onRequestClose={this.props.onRequestClose}
onClick={this.props.onRequestClose()}
type="permanent">
{sidebarList}
</Drawer>
</div>
);
}
}
export default withStyles(rootStyles)(UndockedDrawer);
So far, I've tried to make top property as much as AppBar's height but this behaviour wasn't what I needed.
Is there any way to achieve this?
You need to provide the right styles for the AppBar. Taking the example from the docs you provided:
Instead of:
const styles = theme => ({
...
appBar: {
position: 'absolute',
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
...
});
Use:
const styles = theme => ({
...
appBar: {
position: 'absolute',
width: '100%',
zIndex: '1400',
},
...
});
Why zIndex is 1400? It's just an arbitrary number that is higher than the zIndex of the Drawer, which is 1300.