In my react styled-component i have a Flex component with a couple of children and a separate component:
<Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
{children}
<AlertBell path={pathname} />
</Flex>
I am trying to align children and AlertBell component to the right. However when I add more margin to the AlertBell the children do not move to the left. How can I align the elements right even when increasing the margin in AlertBell?
There are slight differences in the required syntax:
<Flex alignItems="center" justifyContent="flex-end" flex="1 0 auto" px={[12, 18]}>
{children}
<AlertBell path={pathname} />
</Flex>
alignItems="center" is also the default in the current version. flex prop would not be required for this to work, as it applies to the wrapper itself.
Related
I need to return either Porover or Card depending on the condition with the same children content. This can be done by taking the children content into a separate component and returning it like this:
true ? <Popover><ChildrenContent props={props}/></Popover>
: <Card><ChildrenContent props = {props}/></Card>
But it seems to me that this is not the best solution in this case
<Popover dataCy="complexValidation">
<Section marginBottom={3}>
</Section>
<Flex flexDirection="column" gap={3}>
{validations.map((validation) => (
<Flex.Item key={validation.text}>
<Flex alignItems="center">
<Icon name="check_circle" size="large" color={validation.isSuccess ? 'positive' : 'negative'} />
<Flex.Item>
<Typography variant="bodyText2" component="span">
{validation.text}
</Typography>
</Flex.Item>
</Flex>
</Flex.Item>
))}
</Flex>
</Popover>
I have a React JS app that uses the Dialog component and I cannot seem to find any documentation on how I can prevent the dialog from being automatically dismissed by merely clicking the backdrop. I have an explicit action within the dialog that I want to use for control of the dismissal.
I have tried reading the docs and of course searching here but am not finding anything helpful or that contains an example. Any help is appreciated; this is my first time using React.
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
There was mention of this being a possible duplicate of How to handle "outside" click on Dialog (Modal) with material-ui but do not find it helpful as I am using a Dialog component instead of a Modal.
Material 4
Try this:
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title"
open={open} onBackdropClick="false">
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
You can also achieve it setting disableBackdropClick="true", which maybe is more appropriate for your use case.
Material 5
onBackdropClick and disableBackdropClick were deprecated in Material v5, use this instead:
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title"
open={open}>
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
And checking whether the backdrop was clicked in the onClose handler:
const handleClose = (event, reason) => {
if (reason && reason == "backdropClick")
return;
myCloseModal();
}
Try to remove onClose prop to Dialog component, it will solve your problem.
Also you can trigger handleClose on cancel button.
It was a quick fix for me.
<Dialog aria-labelledby="simple-dialog-title" open={open}>
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
I am new to both React and Grommet and have worked through the getting started tutorial. When I add a google map to the main container it renders and fills the whole screen. However, when I click the notification icon to load the sidebar it only renders in a tiny column on the side. Is there a way for me to edit the style to adjust the width automatically or do I need to have the container width as a property that changes when the button is clicked? (Please excuse any question format errors as this is my first post.)
I have tried looking through the Grommet box props and various CSS style settings without success.
App.js:
const { showSidebar } = this.state;
return (
<Grommet theme={theme} full>
<ResponsiveContext.Consumer>
{size => (
...
<Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
<Box
align='start'
justify='start'
fill='horizontal'
responsive='true'
>
<MapContainer />
</Box>
{!showSidebar || size !== 'small' ? (
<Collapsible direction='horizontal' open={showSidebar}>
<Box
flex
width='medium'
background='light-2'
elevation='small'
align='center'
justify='center'
>
sidebar
</Box>
</Collapsible>
) : (
...
}
</Box>
</Box>
)}
</ResponsiveContext.Consumer>
</Grommet>
);
MapContainer.js:
return (
<Map google={this.props.google} zoom={14}/>
);
I would like the map to shrink to fill the container/the container to shrink when the sidebar loads.
I'm trying to only have one column in a grid. But the prop columns={1} is not working. And the columns are not taking the whole width of the window.
This is the code where I return the component.
return (
<Grid columns={1} textAlign='center' container divided='vertically'>
<Grid.Column width={6}>
<Search fluid size='huge'
loading = {isLoading}
onResultSelect = {this.handleResultSelect}
onSearchChange = {this.handleSearchChange}
results = {results}
value = {value} />
{this.state.rides}
</Grid.Column>
<Grid.Column width={10}>
<Image src={faker.image.avatar()} style={{ backgroundSize: 'cover' }} />
</Grid.Column>
</Grid>
);
Image of how it looks at present.
In fact, it's wrong usage of props, columns and width can't be combined. Take a look on this issue on Github, it contains more info about Grid. Also, you can check official docs of SUI.
This is because of the width prop you have on your Grid.Column sub-components. The width for each child column should add up to the total number of columns you have specified.
You could add multiple Grid.Column components to the following layout and they will all appear in a single column:
<Grid
columns={1}
textAlign="center"
container
divided="vertically"
>
<Grid.Column>
...
</Grid.Column>
<Grid.Column>
...
</Grid.Column>
</Grid>
What is the result you are trying to achieve?
I set up an example to play around with at the following URL: https://codesandbox.io/s/pyvqv1k01m
I am trying to have a fixed header where on the right side should be tabs. The <Toolbar /> component is responsible for the responsiveness of the block but doesn't allow for stretched tabs so easily.
https://codesandbox.io/s/jv8v6vwqpv
The problem is that the Toolbar responsively changes its height and the Tabs and Tab component do not (Tabs sets a min-height of 48px in its root class, Tab sets a height in its root class).
Fortunately, the behavior Toolbar uses is available in a theme mixin, so you can create classes that also use this logic:
const styles = theme => ({
fullHeight: {
...theme.mixins.toolbar,
},
});
This will create a class that has the same responsive height logic used in the Toolbar component. Using withStyles, you can make this class accessible to your component:
import { withStyles } from "material-ui/styles";
// ...
export default withStyles(styles)(Header);
This will add a classes prop, which is an object containing a string attribute for each class defined in the object provided to withStyles. You can apply this to the Tabs component and each Tab component by overriding their root classes to ensure that they fill the AppBar:
render() {
const { classes } = this.props;
return (
<AppBar>
<Toolbar>
<Grid container alignItems="center" justify="space-between">
<Grid item>
<Typography color="inherit" variant="title">
BackTube
</Typography>
</Grid>
<Grid item>
<Tabs classes={{ root: classes.fullHeight }} onChange={this.changeTab} value={this.state.currentTab}>
<Tab classes={{ root: classes.fullHeight }} icon={<Magnify />} value="search" />
<Tab classes={{ root: classes.fullHeight }} icon={<FormatListBulleted />} value="lists" />
<Tab classes={{ root: classes.fullHeight }} icon={<Settings />} value="settings" />
</Tabs>
</Grid>
</Grid>
</Toolbar>
</AppBar>
);
Please note that the above solution was written for MUI v1 beta.
UPDATED 5/2022: The same thing can be accomplished in MUI 5, here is a codesandbox