Align right radio groups (#1167)
* Match Design for Switches Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> * Margins Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> * Align Right Radio Buttons Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
This commit is contained in:
@@ -50,12 +50,6 @@ const styles = (theme: Theme) =>
|
|||||||
...fieldBasic,
|
...fieldBasic,
|
||||||
...tooltipHelper,
|
...tooltipHelper,
|
||||||
radioBoxContainer: {},
|
radioBoxContainer: {},
|
||||||
fieldContainer: {
|
|
||||||
...fieldBasic.fieldContainer,
|
|
||||||
display: "flex",
|
|
||||||
paddingBottom: 10,
|
|
||||||
marginTop: 11,
|
|
||||||
},
|
|
||||||
optionLabel: {
|
optionLabel: {
|
||||||
"&.Mui-disabled": {
|
"&.Mui-disabled": {
|
||||||
"& .MuiFormControlLabel-label": {
|
"& .MuiFormControlLabel-label": {
|
||||||
@@ -116,8 +110,8 @@ export const RadioGroupSelector = ({
|
|||||||
displayInColumn = false,
|
displayInColumn = false,
|
||||||
}: RadioGroupProps) => {
|
}: RadioGroupProps) => {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<Grid container alignItems={"center"}>
|
||||||
<Grid item xs={12} className={classes.fieldContainer}>
|
<Grid item xs>
|
||||||
<InputLabel htmlFor={id} className={classes.inputLabel}>
|
<InputLabel htmlFor={id} className={classes.inputLabel}>
|
||||||
<span>{label}</span>
|
<span>{label}</span>
|
||||||
{tooltip !== "" && (
|
{tooltip !== "" && (
|
||||||
@@ -130,8 +124,8 @@ export const RadioGroupSelector = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</InputLabel>
|
</InputLabel>
|
||||||
|
</Grid>
|
||||||
<div className={classes.radioBoxContainer}>
|
<Grid item xs>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
aria-label={id}
|
aria-label={id}
|
||||||
id={id}
|
id={id}
|
||||||
@@ -139,6 +133,7 @@ export const RadioGroupSelector = ({
|
|||||||
value={currentSelection}
|
value={currentSelection}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
row={!displayInColumn}
|
row={!displayInColumn}
|
||||||
|
style={{ display: "block", textAlign: "right" }}
|
||||||
>
|
>
|
||||||
{selectorOptions.map((selectorOption) => {
|
{selectorOptions.map((selectorOption) => {
|
||||||
return (
|
return (
|
||||||
@@ -156,9 +151,8 @@ export const RadioGroupSelector = ({
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</div>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</React.Fragment>
|
</Grid>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user