CEP6/CC2015/MAC (HTML) Dropdown select is cut off and doesn't show below its window bottom on Mac

Report · Jan 11, 2016

My dropdown list (an HTML select list) is cut off and doesn't show below its window border on Mac.

This is the same version of InDesign on Mac and Win. On Windows the list is not cut off.

This is the select code

<select id="cboTemplateToUse" data-value-field="type" data-text-field="name"

data-bind="value: templateSelected, source: templateList" style="width:100%" ;>

</select>

</td>

The template list that is bound to the select element above (using Kendo binding) was made like this, just a number of test items:

templateList: [

{ type: '001', name: 'test1'},

{ type: '002', name: 'test2'},

{ type: '003', name: 'test3'},

{ type: '004', name: 'test4'},

{ type: '005', name: 'test5'},

{ type: '006', name: 'test6'}

]

On Mac it looks like this, the bottom is cut off alongside the window bottom:

In windows it looks good, the dropdown drops down below its window bottom border:

Is the Node / Chrome engine used not the same on Windows and Mac, or is it something else that differs in the implementation?

What can be done about this?

Thanks,

Andreas

Report · Jan 27, 2016

This is the same CEP interface but run direclty in Chrome on the same Mac as the one in my original question.

As you can see, the dropdown is not limited by the outer window borders of Chrome. That only happens inside InDesign on Mac.

Report · Jan 27, 2016

I removed almest everything else from the HTML file, so that no styles should be able to affect the dropdown box, but still it is limited by its containing window in InDesign.

Am I the only one with this problem?

Here is the HTML file I tried with last, if someone would like to give it a try as an Extension on their mac:

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown test SELECT on Mac</title>

   
</head>

<body>
    <select>
        <option>Selection 1</option>
        <option>Selection 2</option>
        <option>Selection 3</option>
        <option>Selection 4</option>
        <option>Selection 5</option>
        <option>Selection 6</option>
        <option>Selection 7</option>
        <option>Selection 8</option>
        <option>Selection 9</option>
        <option>Selection 1</option>
        <option>Selection 2</option>
        <option>Selection 3</option>
        <option>Selection 4</option>
        <option>Selection 5</option>
        <option>Selection 6</option>
        <option>Selection 7</option>
        <option>Selection 8</option>
        <option>Selection 9</option>
        <option>Selection 1</option>
        <option>Selection 2</option>
        <option>Selection 3</option>
        <option>Selection 4</option>
        <option>Selection 5</option>
        <option>Selection 6</option>
        <option>Selection 7</option>
        <option>Selection 8</option>
        <option>Selection 9</option>
        <option>Selection 1 ASDF</option>
        <option>Selection 2</option>
        <option>Selection 3</option>
        <option>Selection 4</option>
        <option>Selection 5</option>
        <option>Selection 6</option>
        <option>Selection 7</option>
        <option>Selection 8</option>
        <option>Selection 9</option>
        <option>Selection 1</option>
        <option>Selection 2</option>
        <option>Selection 3</option>
        <option>Selection 4</option>
        <option>Selection 5</option>
        <option>Selection 6</option>
        <option>Selection 7</option>
        <option>Selection 8</option>
        <option>Selection 9</option>
    </select>
</body>
</html>

Report · Jan 27, 2016

Hi Andreas,

Same thing here. I have the feeling this is something related to the CEP Mac implementation. Maybe post something on the Extension Builder forum or even better (if not already) join Extension Builder prerelease. Maybe Adobe engineers could give some feedback there.

Let me know if you aren't in prerelease and I will do so.

Loic

Report · Jan 28, 2016

I've got an Extension Builder prerelease login, but as I understand it, that forum is just about the Extension Builder software – the development tool. Not about CEP technology as such(?)

I'm trying to open a support case now that I know that it's no mistake from my side, since you got the same problem. Thank you for testing!

Report · Jan 28, 2016

Hi,

You are right to think about Extension Builder forum as a place dedicated to this tool. However it just an IDE that lays on underlaying CEP technology. So I think it would be worth it to give it a try.

I see it as the closest place to Adobe CEP engineers I can think of

I am not that confident that Adobe Support is much concerned about CEP hiccups but I hope I am wrong !

Loic

Report · Jan 28, 2016

Hi

I would go for that forum or more likely the Extension Builder 3 forum.

The HTML workings of CEP are very different to the ones of the browsers.

Loic had a post some time back on the 1st forum that touches on this point.

I didn't have time to look into that issue but can say that the key over there was to use float: left

If you post in one of the above forums, stick a link over here.

Regards

Trevor

Report · Jan 28, 2016

In Flash panels we had the Native DropDown trick that Bob Stucky found, but I don't know of anything similar in HTML...

Report · Feb 01, 2016

I found a disappointing answer to the same question, at the Extension Builder Forum.

"This is expected behaviour", an Adobe Employee wrote (HTML <select> options are cut off).

Report · Feb 01, 2016

That is a very disappointing answer. I was hoping to move all my UI from my C plugins. Maybe next year.

P.

Report · Feb 01, 2016

I'm trying to get in touch with people at Adobe to get the answer verified. Seems like a very odd decision to do.

Of course the <SELECT> behaviour on Mac is expected if you know about it, as I guess the employee at Adobe did. But even so, the answer he gave ... is odd. It's too short and unhelpful.

Report · Feb 01, 2016

lesavage is quite involved with the CEP development, she wrote the csInterface so I highly doubt your get a different answer.

The expanded version of her answer is don't expect any changes or workarounds for the next while.

HTH

Trevor

Report · Feb 02, 2016

I would still like a more detailed answer from Adobe. Including an answer to why it's an "expected behaviour" and not a bug. I didn't expect it to behave like that – one way on Mac and another way on Windows.

Report · Feb 02, 2016

I guess one can use jquery to calculate the amount of lines from the dropdown list till the bottom of the panel and adjust the size variable of the list accordingly.

Below might help you out.

See http://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dro...

Or do like the suggestion there to use HTML, CSS and JS to fake a dropdown list.

Yes, I understand you want to avoid using these pathetic hacks like are needed a lot in SUI but welcome to the world of reality.

<div>
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
</div>

Report · Feb 02, 2016

Googling "css drop down menu with scrollbar" provides some links for the css method I mentioned in the above post which has still not appeared as I have nearly every post of mine held up by the moderators!

Edited

Report · Feb 09, 2016

The support case I opened resulted in a clearer picture. It's the "Chromium Embedded Framework" (CEF) that has this unwanted behaviour on Mac.

I was allowed to quote the answer from the Adobe CEP team:

"The behaviour is expected because CEP has to use CEF's offscreen rendering on Mac and isn't something that we can fix."

Obviously the Adobe CEP team is not responsible for the CEF implementation on Mac, so there is nothing to do but change the interface, and not use a plain SELECT close to a bottom or right border – they will get cut off.

I've been looking for information about this problem on various Chromium forums, to find out more about it (whether it's considered a bug in CEF), but no success.

Report · Feb 09, 2016

That's the kind of issue that can pop up when you delegate technical aspects to a third party system #flexNostalgy

CEP6/CC2015/MAC (HTML) Dropdown select is cut off and doesn't show below its window bottom on Mac

1 Correct answer