CODEWITHSUNDEEP
javascriptreactjs
Nimrod
Nimrod

Reputation: 389

Checkbox not rendering properly in feedback form

I'm trying to create a feedback form using react redux form and I'm kind of struggling with the checkbox implementation

Here is what my web page is rendering:

enter image description here

Here is the code snippet I'm using:

import {  Breadcrumb, BreadcrumbItem, Button, Label, Row, Col } from 'reactstrap';
import { Control, LocalForm, Errors } from 'react-redux-form';

<Row className="form-group">
    <Col md={{size:3, offset:3}}>
        <Control.checkbox model=".agree" id="agree" name="agree"
            className="form-control"
            />
        <Label htmlFor="agree">May we contact you?</Label>
    </Col>
    <Col md={6}>
        <Control.select model=".type" id="type" name="type"
            className="form-control">
            <option value="1">Tel.</option>
            <option value="2">Email</option>
        </Control.select>
    </Col>      
</Row>

Why is my checkbox too big and my label not aligned with the checkbox?

Upvotes: 1

Views: 134

Answers (2)

fluorspar
fluorspar

Reputation: 227

Try this:

<Row className="form-group">
   <Col md={{size: 3, offset: 3}}>
       <div className="form-check">
          <Label check>
             <Control.checkbox
              className="form-check-input" 
              model=".agree" 
              name="agree"
              id="agree" 
             />May We Contact You?
          </Label>
       </div>
   </Col>
   <Col md={6}>
       <Control.select
        className="form-control"
        model=".type"
        name="type"
        id="type"
        >
           <option value="1">Tel.</option>
           <option value="2">Email</option>
        </Control.select>
   </Col>
</Row>

Upvotes: 1

Eb Heravi
Eb Heravi

Reputation: 398

try it:

    <Row className="form-group">
      <Col md={6}>
        <Label htmlFor="agree">
        <Control.checkbox model=".agree" id="agree" name="agree"
         className="form-control" />{' '}
         May we contact you?</Label>
      </Col>
      <Col md={6}>
       <Control.select model=".type" id="type" name="type" 
        className="form-control">
         <option value="1">Tel.</option>
         <option value="2">Email</option>
       </Control.select>
      </Col>
     </Row>

Upvotes: 0

Related Questions