Input checkbox not working

Topic: Input checkbox not working

ppotter10 free asked 4 years ago

Expected behavior Should show input checkbox (default or MDBInput one)

Actual behavior Doesn't show me any checkbox.

Resources (screenshots, code snippets etc.)

 <div>
        <div className="black-text">
          <input type="checkbox" id="test"  />
          <label>Test</label>
        </div>
        <div>
          <MDBInput type="checkbox" />
        </div>
      </div>

Shows me the screen below:

enter image description here

When I remove the lines from index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
// import "bootstrap-css-only/css/bootstrap.min.css";
// import "mdbreact/dist/css/mdb.css";

import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <App />,

  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

It shows me the checkboxes in plain mode:

enter image description here

Add comment

Jakub Chmura staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi @ppotter10,

I sent you an incomplete example. Sorry about that.

You need to set id of checkbox element,

import React from 'react';
import { MDBInput } from 'mdbreact';

const Checkbox = () => {
  return (
    <>
      <MDBInput label=' ' type='checkbox' id='chexbox1' />
      <MDBInput label='Filled-in unchecked' type='checkbox' id='chexbox2' />
    </>
  );
};

export default Checkbox;

Now the example should work well.

Best regards,

Kuba

ppotter10 free commented 4 years ago

That worked, thanks!

Jakub Chmura staff commented 4 years ago

You're welcome!

Add comment

Krzysztof Wilk staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi @ghazale2718986!

You can use flexbox utilities to achieve that, check the code below :)

import React from 'react';
import {
  MDBInput,
  MDBFormInline
} from 'mdbreact';


const InputPage = () => {
  return (
    <MDBFormInline className="d-flex flex-row-reverse">
      <MDBInput
        label='1'
        type='checkbox'
        id='checkbox1'
        containerClass='mr-5'
      />
      <MDBInput
        label='2'
        type='checkbox'
        id='checkbox2'
        containerClass='mr-5'
      />
      <MDBInput
        label='3'
        type='checkbox'
        id='checkbox3'
        containerClass='mr-5'
      />
    </MDBFormInline>
  );
}

export default InputPage;

Add comment

ghazale2718986 free answered 4 years ago

0 0 Best answer

Hi I have a question how can I make checkbox RTL?

Add comment

ppotter10 free answered 4 years ago

0 0 Best answer

Hi, it still doesn't work. See the source and gif below:

Source: https://gofile.io/?c=QpWiRx

GIF:

https://gifyu.com/image/788F

Add comment

Jakub Chmura staff answered 4 years ago

0 0 Best answer

HI @ppotter10,

If you are a pro user please use our pro MDBInput component.

For example:

import React from "react";
import { MDBInput } from "mdbreact";

const InputPage = () => {
  return (
    <MDBInput label="Material input" />
  );
}

export default InputPage;

Best, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.25.0
Device: laptop
Browser: Chrome 79.0.3945.130
OS: Windows 10 Pro
Provided sample code: No
Provided link: No

ppotter10

80Support score
7Questions 4Answers 3Snippets