CODEWITHSUNDEEP
javascripthtmlcssreactjs
Niveditha Karmegam
Niveditha Karmegam

Reputation: 740

How to add css for a react-widget DropdownList?

I need to remove the border from a react-widget dropdownlist.

What I've tried;

HTML

<DropdownList
  data={this.props.create.repos}
  textField='key'
  placeholder={placeholder}
  className='dropdown_customized'
  onChange={this.props.save.bind(this, scenarioIndex, stepIndex, placeholder)}
  groupBy='name'
  filter='contains'
/>

CSS

.dropdown_customized {
    max-width: 200px !important;
    border: none !important;
}

But since its creating a div outside the DropdownList the style is not getting applied.

Anyone know how to fix this??

UPDATE

The displayInputBox function returns the DropdownList..

<div className="flex-container">
   <span className="blueTag"> &emsp;&emsp; {step.stepOne} </span>
   <div className="divider" />
   {this.displayInputBox(this, step.stepTwo, step.stepId, item.scenarioId)}
</div>

   .flex-container {
      display: flex;
      align-items: stretch;
   }

enter image description here

Upvotes: 3

Views: 2562

Answers (1)

Simonov Dmitry
Simonov Dmitry

Reputation: 457

You can try using the DropdownList classes

.rw-widget-container{
    border: none;
}

Upvotes: 2

Related Questions