[BUG] <select> element contents not rendered near bottom of panel window

[sberic]

Cross-posting to raise awareness of the issue. See the full description at GitHub Issue #154.

The short of it is that in CEP8 (at least), dropdown menus (via the <select> element) positioned near the bottom of a panel window will have the dropdown menu contents cut off, rather than either:

1. appear over the edge of the window, or
2. appear as a drop-up.

This fairly strongly breaks the usability of the element. [Tagging Bruce Bullis​ and Zac Lam.]

[Trevor:]

use https://jqueryui.com/selectmenu/  and set like this

$('#YouerSelector').selectmenu({     position: { collision: "flip" } });

[sberic]

Trevorׅ​ Interesting. Let's break this down a bit:

1. We do not use jQuery in our system. Is there a way to do this in a non-jQuery way?
2. The link you sent has dropdown lists that look like the ones in Vanilla-HTML CEP panels. Did you guys install jQuery under the hood for some reason perhaps?

[Trevor:]

I use jquery, I find it way easier to work with.

I don't know how to do it without jquery bu you can check out the jquery source code and just take that snippet.

[sberic]

If "Use jQuery" is your reasoning for "this is not a bug" (and you refuse to describe why this is otherwise not actually a bug), I'm inclined to push the issue and say "Yes, this is actually a bug"... 😕

jQuery does it by creating a proxy element that overrides the built-in <select> element. To do it the way jQuery does it requires building a proxy element of our own. That right there is the definition of "workaround".

[Trevor:]

The fact is the default is Jquery's default also does the same. You have to set the option to change the collision handling, so if Jquery (Whoever he is) doesn't consider it a bug.

[sberic]

Trevorׅ  wrote

The fact is the default is Jquery's default also does the same. You have to set the option to change the collision handling, so if Jquery (Whoever he is) doesn't consider it a bug.

Ahh, gotcha. Basically, if you consider jQuery to be the default spec and do not build websites or panels without it, then an issue that shows up with raw HTML is not a bug because jQuery has a workaround.

jQuery should not be required for basic HTML defaults to work properly. CEP 8 is built on CEF (Chromium Embedded Framework) 57 and the expectation is that raw HTML should work the same, unless otherwise specified and described in the documentation. This is not specified and described in the documentation. This is a bug.

[sberic]

I also reported this issue on the CEP 8 issues post. A discussion about whether this was an Adobe bug or not ensued. See this and the following several posts for that discussion.

In the meanwhile, I will attempt to continue the discussion at the GitHub Issue page.

[Mathias Moehl]

Thank you for sharing this workaround, Trevor! I am very happy to be able to give my customers a much better experience now even before Adobe might fix this properly 🙂

[sberic]

For those who don't use jQuery but do use Bootstrap, the default Dropdown menu can act as a stand-in. You need to update the Dropdown's main text manually if you go this route, however. Bootstrap's Dropdown implementation also "flips" by default.