AnswerBun.com

Vertically center radio button - React and Bootstrap

Stack Overflow Asked by a2441918 on January 1, 2022

I have a container hosting a radio button on the left and other buttons on the right. For some reason, I am unable to align the radio buttons inline with the buttons on the right. Please advice me on a way to fix this.

This is what I have so far:

enter image description here

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.

2 Answers

From what i see, there is some bottom margin to Radio. If you use below style on 'Radio', it works just fine.

style={{ backgroundColor: "yellow", marginBottom: "0" }}

Answered by Tejeshree on January 1, 2022

Set margin-bottom: 0; for label.

Edit
serene-chaplygin-dlxxk

Answered by doğukan on January 1, 2022

Add your own answers!

Related Questions

Bash: insert a line after each line

6  Asked on December 23, 2021 by mr-krisey

     

Recoding groups to create a summary accordingly

1  Asked on December 23, 2021 by rjunkie2

 

Is it a good idea to nest custom serializer classes in django?

1  Asked on December 23, 2021 by john-cymmer

 

create view by using two different array

3  Asked on December 23, 2021 by akshay-namdeo

         

Koltin: Pass Context from inner class

3  Asked on December 23, 2021 by sarah-smith

 

how to write mocha test that have timeout and async both

1  Asked on December 23, 2021 by jogiter

 

SQL CONCAT drops zeros from expression

2  Asked on December 23, 2021

   

Python – arguments to dictionary

0  Asked on December 23, 2021 by user13986859

   

Rundeck not able connect the domain servers

1  Asked on December 23, 2021 by jagadesh

 

Updating the index in an SQL database (python)

1  Asked on December 23, 2021 by luke-teo

     

Using mask to filter dataframe by multiple day of week

1  Asked on December 23, 2021 by meronpan

         

JQuery Menu Editor is not Compatible with AngularJS 1.5

1  Asked on December 23, 2021 by atique-ahmed

     

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir