3

The centers of the text for the labels and status are not aligning with the centers of the text for the buttons. I am using react-bootstrap. A picture shows the issue better than text:

enter image description here

How can I align the centers, I tried a style sheet, as suggested in: vertical-align with Bootstrap 3 but that did not work for react-bootstrap

Also, striped rows might be nice to make the content hold together visually. Tables could do that, but most design folks say tables are for data, not for this stuff.

Style Sheet:

.fieldLabel {
    display: flex;
    align-items: center;
}

JSX:

<Grid>
            <Row className="propRow">
                <Col sm={2} className="fieldLabel">Watson Installed:</Col>
                <Col sm={1} className="fieldLabel">{(WatsonInstalled) ? 'true' : 'false'}</Col>
                <Col sm={3}>
                    <Button bsStyle={(WatsonInstalled) ? 'warning' : 'primary'}
                        block onClick={(e) => buttonAction(e)}>
                        {(WatsonInstalled) ? 'UnInstall' : 'Install'}
                    </Button>
                </Col>
            </Row>
            <Row className="propRow">
                <Col sm={2} className="fieldLabel">Watson Running:</Col>
                <Col sm={1} className="fieldLabel">{(WatsonRunning) ? 'true' : 'false'}</Col>
                <Col sm={3}>
                    <Button bsStyle={(WatsonRunning) ? 'warning' : 'primary'}
                        block onClick={(e) => buttonAction(e)}>
                        {(WatsonRunning) ? 'Stop' : 'Run'}
                    </Button>
                </Col>
            </Row>
            <Row className="propRow">
                <Col sm={2} className="fieldLabel">FME Running:</Col>
                <Col sm={1} className="fieldLabel">{(FMERunning) ? 'true' : 'false'}</Col>
                <Col sm={3}>
                    <Button bsStyle={(FMERunning) ? 'warning' : 'primary'}
                        block onClick={(e) => buttonAction(e)}>
                        {(FMERunning) ? 'Stop' : 'Version Info'}
                    </Button>
                </Col>
            </Row>
        </Grid>
Community
  • 1
  • 1
Dr.YSG
  • 7,171
  • 22
  • 81
  • 139

0 Answers0