Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dropdown] Dropdown menu should open when clicked #7110

Open
marxhanna opened this issue Feb 10, 2023 · 1 comment
Open

[Dropdown] Dropdown menu should open when clicked #7110

marxhanna opened this issue Feb 10, 2023 · 1 comment

Comments

@marxhanna
Copy link

Steps

  1. Copy the code for a selection dropdown from the Semantic UI documentation and paste it in your HTML code;
  2. Refresh the page;
  3. Click on the dropdown menu;

Expected Result

image

The dropdown menu should open upon clicking.

Actual Result

image

The dropdown menu won't open when clicked; besides that, the arrow icon isn't centered.

Version

2.5.0

Testcase

https://jsfiddle.net/marxhanna/vcng10yf/1/

Note: On the presented testcase the arrow icon is centered accordingly, but when I test the code on my browser it stays crooked.

@marxhanna marxhanna changed the title [Dropdown} Dropdown menu should open when clicked [Dropdown] Dropdown menu should open when clicked Feb 10, 2023
@GammaGames
Copy link
Contributor

That dropdown is a collection of divs, you have to call the .dropdown() function on the element to make it interactable. Here's a working jsfiddle: https://jsfiddle.net/7x6bkhns/

If you want it to work without javascript you can use a regular select element:

image

<select class="ui selection dropdown">
  <option value="">Select an option</option>
  <option value="1" data-text="I am Option 1">Opt. 1</option>
  <option value="2" data-text="I am Option 2">Opt. 2</option>
  <option value="a" data-text="I am Option A">Opt. A</option>
  <option value="b" data-text="I am Option B">Opt. B</option>
</select>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants