I am struggling to align a radio button within a container inline with other buttons on the right. Can anyone provide guidance on how to resolve this issue?
Here is my current setup:
https://i.sstatic.net/SSWZe.png
Code:
import React, { Component } from "react";
import { Box, Flex } from "@rebass/grid";
import cx from "classnames";
import styled from "styled-components/macro";
import {
Button,
ButtonGroup,
Classes,
Colors,
Divider,
Icon,
Radio,
RadioGroup
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import "normalize.css/normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import "bootstrap/dist/css/bootstrap.css";
const ScenarioIcon = styled(Button)`
transition: all 0.2s ease;
}
`;
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<Flex>
<Box width={"100%"}>
<div
style={{
padding: "20px",
backgroundColor: "red"
}}
className={cx("bp3-card bp3-interactive")}
>
<Flex alignItems="center" style={{ backgroundColor: "green" }}>
<RadioGroup onChange={() => {}} selectedValue={1}>
<Radio
style={{ backgroundColor: "yellow" }}
className={cx(Classes.TEXT_LARGE)}
label={"Sample"}
value={1}
/>
</RadioGroup>
<Box flex="auto" />
<ButtonGroup>
<ScenarioIcon
className="utility-button"
icon={<Icon icon={IconNames.EDIT} color={Colors.WHITE} />}
minimal={true}
title="Edit"
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon icon={IconNames.DUPLICATE} color={Colors.WHITE} />
}
minimal={true}
title="Copy"
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon
icon={IconNames.DOCUMENT_SHARE}
color={Colors.WHITE}
/>
}
minimal={true}
title={"Archive"}
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon
icon={IconNames.TRASH}
color={Colors.RED1}
color={Colors.WHITE}
/>
}
minimal={true}
title="Delete"
/>
<Divider />
</ButtonGroup>
<Icon
icon={IconNames.CHEVRON_RIGHT}
color={Colors.WHITE}
className="align-self-center"
iconSize={20}
/>
</Flex>
</div>
</Box>
</Flex>
);
}
}
export default App;
CodeSandbox Link: Link
P.S: I am open to using bootstrap as well for alignment.