[Dropdown] Little css issue with edge and sub-submenus dropdown icon

[Ikaer]

Bug Report

Steps to reproduce

1. Use the jsfiddle

Expected result

Sub-submenus should have correct dropdown icon position

Actual result

Dropdown icon is below the text of item

Testcase

https://jsfiddle.net/jxwhk10m/ (to open with Edge to reproduce the issue)
NB: my edge at the time was:
Microsoft Edge 42.17134.1038.0
Microsoft EdgeHTML 17.17134

Screenshot (when possible)

Version

2.7.8

Workaround:
I fixed it using the following css rule, but I'm not sure its a good thing to do::
https://jsfiddle.net/jxwhk10m/1/

.ui.menu .ui.dropdown .menu > .item{
  display:flex !important;
}

[y0hami]

This is also an issue on Safari (12.1 latest) and IE (11)

Edge:

IE:

Safari:

Tested all major browsers with BrowserStack and only these 3 seem to have the issue.

[Ikaer]

The problem also appears in dropdown menu, not just menu.

This is an example of the issue: https://jsfiddle.net/kz9wrdh4/
The workaround: https://jsfiddle.net/zda1ocnt/

This workaround is more general and work for both cases (initial issue and this one)
https://jsfiddle.net/7zdvbjec/

.ui.dropdown .menu > .item{ display:flex !important; }

[Ikaer]

So my workaround introduces some new problems:

Dropdown icon are not at the end of the item.

So I will let you find a proper solution guys :)

Thanks.

[lubber-de]

🤔 That was fixed at least for IE11 by #339 in 2.7.2
But even when using v2.7.2 today it's not working anymore...Seems like there have been updates for the browsers making this old change incompatible again.
Basically the reason for the mentioned browsers is lack of support for min-width: max-content

[rkomiyama]

Why not just use flexbox instead of using floats? I've implemented a solution, but it would require modifying any existing HTML.

[lubber-de]

@rkomiyama Could you provide a jsfiddle with your solution?

[rkomiyama]

Actually, I found a way to provide enough specificity to get around the !important tag.

https://jsfiddle.net/14o6wm90/

div.ui.menu div.ui.dropdown.item div.menu > div.ui.dropdown.item {
  display:flex;
}

I've tested this in Safari and it works. JSfiddle doesn't work in IE11, so I won't be able to test it in Edge until later today.

If this is an acceptable solution, I would like to put up a PR for it :)

[lubber-de]

@rkomiyama well, beside the remove of !important
The result is already the same as suggested by @Ikaer before here #1071 (comment)

[lubber-de]

If you can also fix the icon position issue, then go for a PR 🙂

[lubber-de]

At least @Ikaer Example (which was also broken in chrome) is fixed now by #1838
https://jsfiddle.net/lubber/3b19owde/2/