Unable to choose items at the bottom of a field dropdown, if the list is too long

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Drag a block into the workspace that contains a lot of items in its field 
dropdown (say more than 20, although it depends upon the size of the browser 
window and/or workspace). 
2. Attempt to select an item at the end of the field dropdown
3. There is no way to select the item because there is not enough room on the 
display to show the bottom item(s), and there is no way to scroll down to them.

What is the expected output? What do you see instead?
There should be a way to choose items in the dropdown which cannot be 
displayed. For example, the dropdown list could have a scroll bar on it.

What browser are you using?
Chrome, Firefox

Please provide any additional information below.

Original issue reported on code.google.com by justin.e...@gmail.com on 23 Jul 2012 at 9:45

[GoogleCodeExporter]

Hi,

I had the same problem.
Please see my solution in issue #80.

Best regards,
Achim

Original comment by hacimben...@gmail.com on 11 Oct 2012 at 11:44

[GoogleCodeExporter]

Could you show an example of using this features, or screenshot.

Original comment by yurypal...@gmail.com on 1 Nov 2012 at 2:23

[GoogleCodeExporter]

Sure - Here is a simple example. The dropdown contains choices "aa" though 
"zz". The options after "oo" are truncated and cannot be selected.

Does that help?

Original comment by justin.e...@gmail.com on 1 Nov 2012 at 4:55

Attachments:

• blockly-long-dropdown.png

[GoogleCodeExporter]

Ou, no. How to add a scrollbar to the dropdown list?

Original comment by yurypal...@gmail.com on 2 Nov 2012 at 1:21

[GoogleCodeExporter]

Exactly!
I would love to find out, one way or the other... :)

Original comment by justin.e...@gmail.com on 2 Nov 2012 at 1:45

[GoogleCodeExporter]

Hi All, do you have any idea how to quickly fix this BUG ?

Original comment by kikcorp@gmail.com on 8 Jul 2013 at 12:20

[GoogleCodeExporter]

I found this project http://www.carto.net/svg/gui/scrollbar/ i think it may be 
solution for this issue 

Original comment by kikcorp@gmail.com on 8 Jul 2013 at 12:55

[GoogleCodeExporter]

Could really use a solution for this (scrollbar). We're using blockly in home 
automation event creation, a long list of devices prevents people from 
selecting the ones that run off the screen... (www.domoticz.com).

Original comment by copyca...@gmail.com on 13 Jul 2013 at 9:06

[GoogleCodeExporter]

Dear developers help us! It is very important to us

Original comment by kill.ins...@gmail.com on 22 Jul 2013 at 11:28

[GoogleCodeExporter]

Would it be possible to just move "New variable..." and "Rename variable..." to 
the top of the dropdown as a temporary fix?

Original comment by abcboy...@gmail.com on 7 Aug 2013 at 2:05

[GoogleCodeExporter]

Consider that, depending upon the application, variables may not even be 
applicable or be available. So that is not a general-purpose fix.

For now, the best general-purpose workaround is from issue #80.

Original comment by justin.e...@gmail.com on 7 Aug 2013 at 3:38

[GoogleCodeExporter]

We have just put this job on Freelancer for a fix see job here:
https://www.freelancer.com/contest/Fix-for-Google-Blockly-Code-45265.html

So yes we need it fixed too :)

Original comment by primary....@gmail.com on 5 Nov 2013 at 5:08

[GoogleCodeExporter]

Seems to be a dead link, did this ever go anywhere?

Original comment by justin.e...@gmail.com on 30 Nov 2013 at 4:10

[GoogleCodeExporter]

Fixed.  Changes r1649, r1654, r1658, r1659, and r1660 migrated the menus 
(context and dropdown) from SVG constructs to HTML.  These menus can now 
overhang the edge of Blockly's SVG rectangle to take full advantage of the 
screen size.  They are also much smarter about layout, so location of the block 
is no longer a limiting factor.

While this is a big step forward, it does not solve the case of menus with a 
ludicrous number of options.  One answer to this problem is scrollbars, but 
let's see if the current system is sufficient.

Sorry for taking so long to address this issue.  In retrospect I should have 
made a temporary patch to the original code, rather than waiting to do the big 
SVG-HTML migration.

Original comment by neil.fra...@gmail.com on 23 Mar 2014 at 3:13

• Changed state: Fixed

[GoogleCodeExporter]

Not sure if this helps, but I was able to use neil's help and use this 
workaround 

https://groups.google.com/forum/#!topic/blockly/-IP0QCKEE28

Original comment by atins...@gmail.com on 9 Apr 2014 at 11:16

[GoogleCodeExporter]

Hello, everyone. This issue was killing us in our use of blockly; we had 
customers adding 30 or 40 variable names to a script, even after the change to 
HTML, could not get to all the variable names in a drop down list.

I made the following changes to limit the size of a drop-down list and to add a 
scroll bar if the list is to long. Please consider adding them to blockly.

In field_variable.js:

/**
 * Return a sorted list of variable names for variable dropdown menus.
 * Include a special option at the end for creating a new variable name.
 * @return {!Array.<string>} Array of variable names.
 * @this {!Blockly.FieldVariable}
 */
Blockly.FieldVariable.dropdownCreate = function() {
  var variableList = Blockly.Variables.allVariables();
  // Ensure that the currently selected variable is an option.
  var name = this.getText();
  if (name && variableList.indexOf(name) == -1) {
    variableList.push(name);
  }

  /* 
   * 2014 07 2104 Thomas C. Bitsky Jr.
   * Modified so that the RENAME_VARIABLE and NEW_VARIABLE
   * options appeared at the top of the list, not at the bottom.
   * This is because I modified the CSS so that a long variable
   * list would scroll, so it makes more sense to have these 
   * options available immediately at the top.
   */

  variableList.sort(goog.string.caseInsensitiveCompare);

  // variableList.push(Blockly.Msg.RENAME_VARIABLE);
  // variableList.push(Blockly.Msg.NEW_VARIABLE);

  variableList.unshift(Blockly.Msg.RENAME_VARIABLE);
  variableList.unshift(Blockly.Msg.NEW_VARIABLE);

  // Variables are not language-specific, use the name as both the user-facing
  // text and the internal representation.
  var options = [];
  for (var x = 0; x < variableList.length; x++) {
    options[x] = [variableList[x], variableList[x]];
  }  
  return options;
};

In css.js

/*
 * 2014 07 17 Thomas C. Bitsky Jr.
 * Modified to have a scroll bar if there are too many 
 * items in the list.
 * A max-height is required to trigger overflow and get a scrollbar. 
 */
  '.blocklyDropdownMenu {',
  '  padding: 0 !important;',
  '  overflow-y: auto !important;',
   '  max-height: 300px !important;',
  '}',

Original comment by rhythmch...@gmail.com on 18 Jul 2014 at 1:25

[GoogleCodeExporter]

I downloaded the files from 
https://code.google.com/p/blockly/source/detail?r=1659#, but doesn't work... 
I'm getting errors instead. Does it works for anybody?

Original comment by alcidesf...@gmail.com on 22 Jan 2015 at 4:26