Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Dropdown] Little css issue with edge and sub-submenus dropdown icon
See original GitHub issueBug Report
Steps to reproduce
- 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;
}
Issue Analytics
- State:
- Created 4 years ago
- Comments:10 (8 by maintainers)
Top Results From Across the Web
Solved with CSS! Dropdown Menus - CSS-Tricks
Hey, great article! There's a small issue when hovering-out from a sub-menu, and then hover back in that area makes the sub-menu visible...
Read more >CSS-only dropdown menu works fine but not in Edge
New button element to wrap around the two menus --> <button id="menu"> <! ... Just have one menu that is always shown, and...
Read more >Dropdowns - Bootstrap
Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs. Single button. Any single .btn can be turned...
Read more >Line-by-line: advanced CSS tricks for click-to-open drop-down ...
This is intended as a click-to-open drop-down menu (if you want a drop-down menu that opens on mouse hover instead of mouse click, ......
Read more >Drop-down icons on mobile menu, a non-filled square symbol
I tried fixing the issue with some css but that did not work. A non-filled little black square icon appears and not a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
At least @Ikaer Example (which was also broken in chrome) is fixed now by #1838 https://jsfiddle.net/lubber/3b19owde/2/
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; }