CODEWITHSUNDEEP
javascriptuser-interfaceframeworksdropdownsemantic-ui
peaceduck
peaceduck

Reputation: 281

Semantic UI dropdown not working properly

I want to make a multiple select search dropdown using Semantic UI, I already use bootstrap and if I use the entire Semantic theme it will destroy the bootstrap I already have in my project, so what I did is I included just the dropdown files (there is a seperate download on the Semantic website).

The problem is that the dropdown-only version is alot different than the semantic version (see links below).

I really don't want to use all of Semantic since it just won't work for me but I find it a bit odd that the standalone dropdown files don't match with the examples, am I missing a file?

<select class="ui fluid search dropdown" multiple="">
  <option value="">State</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
</select>

Links:

Semantic UI Dropdown example: https://jsfiddle.net/yykfy317/1/

Semantic UI Full example: https://jsfiddle.net/vucrt4g8/6/

Upvotes: 0

Views: 2533

Answers (1)

Alexander Tyapkov
Alexander Tyapkov

Reputation: 5017

Yes, you have to include other related files so that your dropdown looks like in Semantic UI. They are search.css and js, label.css and js, icon.css

Additionally you need some body specific css:

body {

    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 1.4285em;
    color: rgba(0,0,0,.87);

}

The full example can be seen here: https://jsfiddle.net/v39j4r04/2/

Upvotes: 1

Related Questions