CODEWITHSUNDEEP
reactjsbootstrap-selectbootstrap-selectpicker
xzk
xzk

Reputation: 877

Bootstrap-select Multi-select rendered wrongly

What I have:

<div className="col-md-2">
    <label>Status</label>
    <select className="selectpicker" multiple title="Choose one of the following...">
        <option>OK</option>
        <option>PENDING</option>
        <option>NEW</option>
    </select>
</div>

PROBLEM:

Values (OK, PENDING, NEW) are displayed separately in another scrolled field. Whereas the drop down select field is displayed as separate field beside it. The drop down select field has no value inside. Screenshot attached.

Screenshot

What I wanted is this kind of dropdown: (Taken from Bootstrap-select documentation)

enter image description here

The technology stack of my project:

Could this be compatibility issue?

EDIT

I'v given up. I had to choose to use bootstrap-multiselect instead. It is much less confusing. Recommend it!

Upvotes: 1

Views: 4126

Answers (2)

Ashwin Golani
Ashwin Golani

Reputation: 421

is this what you are looking for??

<div className="col-md-2">
    <label>Status</label>
    <select className="selectpicker">
        <option selected="selected">Choose one of the following</option>
        <option>OK</option>
        <option>PENDING</option>
        <option>NEW</option>
    </select>
</div>

Upvotes: 0

Johnson Samuel
Johnson Samuel

Reputation: 2086

Please check this: I have used the https://jedwatson.github.io/react-select/ and it works great.

import React from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default class SelectComponent extends React.Component {
  state = {
    selectedOption: '',
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Selected: ${selectedOption.label}`);
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        name="form-field-name"
        value={selectedOption}
        onChange={this.handleChange}
        multi
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}

Upvotes: 3

Related Questions