CODEWITHSUNDEEP
reactjsdropdown
Loren
Loren

Reputation: 902

Semantic UI React Dropdown Obscures Search Box

I’m developing a react application where I use a Semantic UI React Dropdown where the user can search for and select a time zone. Programmatically the dropdown works fine. Except that dropdown list obscures the dropdown’s search box. See picture below. How can I reposition the dropdown list?

enter image description here

  <Grid.Column width={8}>
    <div style={styleDropdownDiv}>
      <Dropdown
        placeholder='Time Zones'
        search
        selection
        fluid
        options={timeZonesDropdownData}
        value={this.state.diveSiteTimeZoneID}
        onChange={this.onTimeZoneChange}
      />
    </div>
  </Grid.Column>


const styleDropdownDiv = {
  padding: '0px',
  marginTop: '15px'
};

Upvotes: 1

Views: 289

Answers (1)

Loren
Loren

Reputation: 902

Problem solved … it had nothing to do with the Dropdown, but rather with the react-datetime component displayed on the left side. It came with css which I modified that conflicted with the Dropdown.

Upvotes: 1

Related Questions