I have three buttons in a Dialog like so:
The JSX is
<DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
Clear
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
Cancel
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)} >
Select
</Button>
</DialogActions>
The 'buttonRoot' style simply determines the button coloring. How to I left align the 'Clear' button so it sits on the left? It seems the buttons are each in a div with a MuiDialogActions-action class.
Just use divider element with flex: 1 0 0 CSS style:
<DialogActions>
<Button>
Left
</Button>
<Button>
Buttons
</Button>
<div style={{flex: '1 0 0'}} />
<Button>
Right
</Button>
<Button>
Buttons
</Button>
</DialogActions>
No need for complicated answers:
Just set the DialogActions component style to {justifyContent: "space-between"}
<DialogActions style={{ justifyContent: "space-between" }}>
<Button>
Left
</Button>
<Button>
Right
</Button>
</DialogActions>
You can do it with Flexbox:
DialogActions {
display: flex; /* displays flex-items (children) inline */
}
DialogActions > Button:first-child {
margin-right: auto;
}
<DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()}>
Clear
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()}>
Cancel
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)}>
Select
</Button>
</DialogActions>
Note: See it in full screen.
Edit: This does not answer the question. It will align all the buttons to the left.
According to the DialogActions API the classes you can override are root and spacing.
After taking a look at the implemantation of the component you can see in root class the rule justifyContent: 'flex-end'.
I simply apllied justifyContent: 'flex-start' with another class:
<DialogActions classes={{ root: classes.leftAlignDialogActions }}>
....
</DialogActions>
Make sure to create the class leftAlignDialogActions with makeStyles
const useStyles = makeStyles(theme => ({
leftAlignDialogActions: {
justifyContent: 'flex-start'
}
}))
I would also disableSpacing and then add the flex attributes and MUI styles overrides I need via the sx prop. In my case I had to modify the spacing (gap) from 8px to 10px.
<DialogActions disableSpacing sx={{gap: '10px'}}>
<Button>Cancel</Button>
<Button>Submit</Button>
</DialogActions>
Maybe in your case another option is to wrap the 2nd and the 3rd buttons in a Box component and on the container to add justifyContent: space-between. In this way in the flex container you will have 2 flex items which will be pushed to the left inner edge and right inner edge of the container. The left item will be the first button and the right item will be the Box which has the 2nd and 3rd buttons as children.
You can use first child selector because first button is clear button in tag DialogActions
DialogActions button:first-child {
float:left;
}
OR
You can try. You need to adjust left and bottom property accordingly.
DialogActions{
position:relative;
width:100%;
}
DialogActions button:first-child {
position:absolute;
left:10px;
bottom:10px;
}
Hope it helps you.
Related
I want to add a button to material-table toolbar. it doesnt do anything relevant to the table. it just opens a modal with some information
I want to add a button called "quotations" to the left side of the "add item" button.
Sandbox code: https://codesandbox.io/embed/charming-yalow-4pnk4?fontsize=14&hidenavigation=1&theme=dark
As Will Evers mentioned, it's possible to add whatever is necessary to Toolbar of the MaterialTable component by using Toolbar prop :
Toolbar: (props) => (
<div
style={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center"
}}
>
<Button
style={{ height: "fit-content" }}
color="primary"
variant="contained"
>
Quotations
</Button>
<div style={{ width: "13rem" }}>
<MTableToolbar {...props} />
</div>
</div>
),
Working Demo
Per the docs, it looks like you need to override the Toolbar component of your table and you should be able to add what ever you want above the column headers:
https://material-table.com/#/docs/features/component-overriding
https://i.stack.imgur.com/J0mqf.png
Use this prop in the component tag
renderTopToolbarCustomActions={() => (
<Button
variant="contained"
color="primary"
size="large"
onClick={() => console.log('something')}
>
Quotations
</Button>
)}
Good morning,
I am in love with MUI, there is so much one can do. However, after using it extensively, I have noticed that a MUI Divider does not show up when it is the child of a Container or Paper component. I can't find anything as to why this is the case, so it is probably my implementation. Could someone check it out and see why it isn't appearing?
Everything is imported, the Popover works fine.
Thank you!
navBarPopover: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<Container className={clsx(classes.navBarPopover)}>
<Button className={clsx(classes.loginButton)} component={Link} to="/user_auth" onClick={() => handleClose()}>
Login
</Button>
<Divider />
<Button className={clsx(classes.loginButton)} component={Link} to="/faqs" onClick={() => handleClose()}>
FAQs
</Button>
</Container>
</Popover>
I agree, Material-UI is really awesome.
In this issue, you're giving display:'flex' to the parent container. By giving flex, the child elements take the minimum possible width as flex-shrink is there on child elements by default.
So, here the Divider is there but its width is 0. Provide width to 100%.
<Divider style={{width:'100%'}} />
Check the demo here:- https://codesandbox.io/s/happy-euler-2ycv4
I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?
Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.
I am trying to align a button to the most right yet not sucessfull. Here is my attempt.
<Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={this.onSend}>
You need to add display flex to the parent element of your Button.
See sandbox here for example: https://codesandbox.io/s/testproviderconsumer-klcsr
class App extends React.Component {
render() {
return (
<div style={{ display: "flex" }}>
<button
style={{ marginLeft: "auto" }}
>
Click
</button>
</div>
);
}
}
{{display: 'flex', justifyContent: 'flex-end'}} are defined in the parent element to align items in the child element.
We can also use float property to align.
<Button variant="contained" style={{float: 'right'}} color="primary" className="float-right" onClick={this.onSend}>
You have to defined in the parent element to align items in the child element.
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<button>
Click here
</button>
</div>
<Button variant="contained" style={{ marginLeft: "auto" }} color="primary" onClick={this.onSend}>
Click
</Button>
I have a Button inside a Grid and was using fullWidth to expand it to fill the container.
This worked fine, until I wrapped it in a Badge. Now the fullWidth property is ignored and the button is default width.
Worked fine:
<Button variant={"outlined"} color={"secondary"} fullWidth>
Todo
</Button>
Now not working:
<Badge badgeContent={4} color={"secondary"}>
<Button variant={"outlined"} color={"secondary"} fullWidth>
Todo
</Button>
</Badge>
How can I get the button to expand to fill its parent?
import React, {Component} from 'react';
import Grid from "#material-ui/core/Grid/Grid";
import Button from "#material-ui/core/Button/Button";
import Badge from "#material-ui/core/Badge/Badge";
export default class App extends Component {
render() {
return (
<Grid container style={{margin: 10}}>
<Grid item xs={2}>
<Badge badgeContent={4} color={"secondary"}>
<Button variant={"outlined"} color={"secondary"} fullWidth>
Todo badge
</Button>
</Badge>
<Button variant={"outlined"} color={"secondary"} fullWidth>
Todo no badge
</Button>
</Grid>
<Grid item xs={10}>
</Grid>
</Grid>
);
}
};
you have to apply fullWidth property to badge
<Badge badgeContent={4} color={"secondary"} fullWidth>
<Button variant={"outlined"} color={"secondary"}>
Todo
</Button>
</Badge>
Just add this property: fullWidth={true}
import { Button } from "#mui/material";
<Button
variant="contained"
fullWidth={true}
type="submit"
>
Click me
</Button>
docs:
https://mui.com/api/button/
I could come up with a solution using width CSS property:
here is my answer:
const styles = theme => ({
margin: {
margin: theme.spacing.unit * 2,
width: '100%'
}
});
function SimpleBadge(props) {
const { classes } = props;
return (
<Grid container>
<Grid item xs={11}>
<Badge color="primary" badgeContent={4} className={classes.margin} >
<Button variant="contained" fullWidth>Button</Button>
</Badge>
</Grid>
</Grid>
);
}
please find that I have used width: '100%' in badge styles.
here is a working example: https://codesandbox.io/s/wqm9kmxmql
hope this will help you.
One easy way is to use the sx prop on the Badge to set the width to '100%'.
<Badge sx={{ width: '100%' }} variant="dot" color="primary" badgeContent={1}>
<Button fullWidth variant="contained" color="neutral">
Button
</Button>
</Badge>
And make sure you have fullWidth set on the Button