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>
Related
[]i want my button should be like that.but my button always stay in left1
I think the easiest way to do it is to just use a div! or you can create a custom component that does that for you.
<ListGroup.Item>
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
<Button variant="primary">Primary</Button>
</div>
</ListGroup.Item>
I have a table with a custom right side control, where the user can set the columns visibility as well as reorder them. Upon clicking a button, the control expands and the user can now make changes. The basic functionality is there. I am now trying to make the transition a smoother and that is where I am failing.
Here is the minimal markup that is rendered:
<div
style={{
display: "flex",
justifyContent: "flex-start"
}}
>
<div style={{ flex: "auto" }}>
<Table columns={columns} dataSource={data} pagination={"false"} />
</div>
<div
style={{
flex: hasExpandedControls ? "2 1 1" : "0 0 1",
transition: "all 500ms ease-in-out"
}}
>
<div
style={{
display: "flex"
}}
>
<div>
{hasExpandedControls ? (
<Tree
checkable
draggable
treeData={columnsTree}
checkedKeys={visibleColumns.map((col) => col.key)}
onCheck={handleCheck}
onDrop={handleDrop}
style={{ marginRight: "0.5em" }}
/>
) : null}
</div>
<div>
<div style={{ padding: "50% 0", height: 0, width: "40px" }}>
<Button
onClick={() => setHasExpandedControls((prev) => !prev)}
style={{
marginLeft: ".5em",
display: "block",
transformOrigin: "top left",
// transform: 'rotate(-90deg) translate(-100%)',
transform: "rotate(90deg) translate(0, -100%)",
marginTop: "-50%"
}}
>
Spalten
</Button>
</div>
</div>
</div>
</div>
Clicking the button triggers a state change, which causes the Tree to be rendered and in this instance the div 'snaps' to its full width. I am failing to accomplish my goal using css transitions, so I was wondering if there was an easier way to accomplish my goal.
I've tried setting the transition on various wrapping elements and all elements, but the 'snap' into existence remains.
Codepen to reproduce: https://codesandbox.io/s/basic-usage-antd-4-17-3-forked-yq2u7?file=/index.jshttps://codesandbox.io/s/gu4hs
Now i have used state hook to hide the Form when the page loads. And upon the click or toggle of the radio I'm able to show the Form, But if i toggle the radio again, the form is not hiding.
This is what i have implemented:
const WelcomeTab = () => {
const [toggle, settoggle] = useState(false);
return (
<React.Fragment>
<Tab.Pane
style={{
borderRadius: '7px',
padding: '30px',
}}
attached={false}
>
<Grid>
<Grid.Row>
<Grid.Column floated="left" width={8}>
<Header
style={{
fontSize: '18px',
fontFamily: 'Nunito-Regular',
color: '#4F4F4F',
}}
>
Welcome Screen
</Header>
</Grid.Column>
<Grid.Column floated="right" width={4}>
<Header
as="h4"
style={{
display: 'flex',
justifyContent: 'space-around',
marginLeft: '30px',
}}
>
Customize
<Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
</Header>
</Grid.Column>
</Grid.Row>
</Grid>
{toggle ? (
<Form style={{ paddingTop: '20px' }}>
<Form.Field>
<label style={lableStyle}>Title</label>
<input style={{ marginBottom: '20px' }} />
<label style={lableStyle}>Message</label>
<TextArea />
</Form.Field>
</Form>
) : null}
</Tab.Pane>
</React.Fragment>
);
};
const lableStyle = {
fontFamily: 'Nunito-Regular',
fontWeight: 400,
color: '#4F4F4F',
fontSize: '15px',
display: 'inline-block',
marginBottom: '10px',
};
export default WelcomeTab;
try to add useEffect hook along with change like below,
you no longer need to {} this is old syntax of setState, using hooks we directly make the changes, hope this helps
useEffect(()=>{},[toggle])
replace this wrong syntax code, i can see its not json its boolean value
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>
as this is old syntax not work with hooks, try to implment this instead,
<Radio toggle onChange={()=>settoggle(!toggle)}/>
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>
)}
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.