[Dropdown] Incorrect display of remote dropdown

[dabroz]

Bug Report

This is visible even in Fomantic UI docs. I can also reproduce this locally.

Steps to reproduce

1. Visit https://fomantic-ui.com/modules/dropdown.html#match-search-query-on-server
2. Try searching for "linux"

Expected result

The results should not be mangled

Actual result

Results are displayed incorrectly

Testcase

Screenshot (when possible)

Version

2.9 (as per fomantic-ui.com website) Chrome 127, mac OS

[dabroz]

And this is how it looks in my project after selecting a value

[lubber-de]

Thanks for reporting. While i test a fix for all possible situations and dropdown variants, please try to add the following to your project

.ui.selection.dropdown .menu > .item:has( > .description) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

[dabroz]

Thanks for looking into it!

However, this doesn't seem to solve this issue. Without this patch:

With this patch:

[lubber-de]

@dabroz Please try to enhance the selector as follows, so the selected text matches the dropdown item list.

.ui.selection.dropdown > .text:not(.default):has( > .description),
.ui.selection.dropdown .menu > .item:has( > .description) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

However, it seems you removed the left margin from the description using custom css(?) .