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}>-
Are you using bootstrap?Cat_Enthusiast– Cat_Enthusiast2019-05-18 20:52:44 +00:00Commented May 18, 2019 at 20:52
-
nop I am using material uiuser10398929– user103989292019-05-18 20:54:02 +00:00Commented May 18, 2019 at 20:54
-
For some reasons, I am restricted not to use bootstrapuser10398929– user103989292019-05-18 20:54:32 +00:00Commented May 18, 2019 at 20:54
Add a comment
|
4 Answers
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.
3 Comments
Cat_Enthusiast
Can you post the mark-up for your buttons above? Will give me something to work-off of :)
We can also use float property to align.
<Button variant="contained" style={{float: 'right'}} color="primary" className="float-right" onClick={this.onSend}>
Comments
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>
Comments
<Button variant="contained" style={{ marginLeft: "auto" }} color="primary" onClick={this.onSend}>
Click
</Button>
1 Comment
Syscall
Your answer could be improved with additional supporting information. Please edit your answer to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.