0

I'm just starting with react and I have an issue with displaying a dropdown caret(arrow) in IE11. I'm using react-toolbox and it is visible in Chrome and Firefox.

After some investigation I thought it was an issue with rendering :after element in IE11 and I added

display:block

to it as in the topic here but it didn't work.

My code looks like this:

import ReactDropdown from 'react-toolbox/lib/dropdown'
<div className="row">
      <div className="col-md-4" style={{ textAlign: 'left' }}>
        <ReactDropdown
          source={searchDropdown.map(currentValue => {
            return { value: currentValue.value, label: currentValue.label}
          })}
          value={searchType}
          onChange={value => this.setState({searchType: value})}
          theme={dropdown}
        />
      </div>
</div>

The structure in Chrome looks like this:

Chrome

and in IE11 like this

IE11

You cannot even see :after element as in Chrome.

Any ideas?

Thank you in advance.

Julita Lut
  • 1

1 Answers1

0

I solved this by adding style for :after :

    .value::after {
  border-top: 5px solid #0000a0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

originally react-toolbox generates borders for caret as calc/calc/calc... and apparently IE11 doesn't read it properly. maybe it helps someone in the future :)

Julita Lut
  • 1