search

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.23k stars 4.05k forks source link

Multiselect Dropdown in horizontal List moves #3720

Open Reygok opened 5 years ago

Reygok commented 5 years ago

Bug Report

Steps

Create a horizontal List, add two Dropdowns, add prop 'multiple' to one of the two, and add some options to both. Select one option in both of them.

Expected Result

Both Dropdowns should stay in place

Actual Result

The moment you select an element from the multi-select Dropdown, it moves down about one millimeter. That's what happens in the code sandbox. In my app, it is moved down from the start, even without anything being selected.

Version

0.87.3

welcome[bot] commented 5 years ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

layershifter commented 5 years ago

Please provide a minimal repro on CodeSandbox.

Reygok commented 5 years ago

There you go :)

https://codesandbox.io/embed/semantic-ui-react-example-xghj2

qooban commented 3 years ago

In the provided code sandbox we can also observe another problem - misalignment in the right border when dropdown is in open state: image

@layershifter I don't know if that problems needs (or already have) separate issue? Please let me know if new issue is needed (I can create one).

khanstan commented 2 years ago

Do you know if this has been addressed already? It can appear on both sides of the dropdown in both ways. For example these are from the official website. The issue appears and disappears on page zoom (from 50% to 150% zoom) on latest Firefox.

semantic-ui-left-out semantic-ui-left-in semantic-ui-right-out semantic-ui-right-in

BastianW13 commented 1 day ago

Hey there, i encountered this issue as well. (dropdown moving when used as multiple selection). Using Semantic-UI-React v2.1.5. It seems that it is mainly connected to the vertical-align property of the label/text inside the dropdown component. Changing the property value to inherit mostly solved it for me. It is important though to have some content (be it a selected option or a placeholder, even an empty placeholder) in the adjacent dropdown components.

I did not test this semi-fix yet in a sufficient manner but maybe it helps someone else in finding a better solution.