Drop Down Menu

[Polar Bear]

Hello, I am interested in making a drop down menu. 

I took the code from DemoComboBox.js inside the sun dependency. 

 

Although i am able to get the combo box to show on screen, I am unable to have more options drop down. 

Only the first element in the list from DemoComboBox shows up.

I put all the code from Demo into my projects screenview. 

I would appreciate any sort of input. Thank you!

[martin.v...@gmail.com]

Hello,

Thanks for effort.  It looks as if you were able to attach the combobox to the screenview. However, the combobox is made of a box and a listParent.

You may not be able to shoe the listParent is the  combo box is not enabled. or maybe you did not attach the list parent to the Screenview in the first place.

Those would be my first two guesses.  It is difficult for us to help address your problem without the actual code.

Martin Veillette

[martin.v...@gmail.com]

Here is an example of a working combobox.

I created it in example-sim. You can get example-sim by cloning it:

git clone https://github.com/phetsims/example-sim.git

I went to MagnetsScreenView.js of the example-sim and deleted the previous content and added the following.

```

// Copyright 2021, University of Colorado Boulder

/**
 * MagnetsScreenView is the top-level view component for the 'Magnets' screen. All of the components that make up
 * the screen's view are added here.
 *
 * @author Chris Malley (PixelZoom, Inc.)
 * @author Sam Reid (PhET Interactive Simulations)
 * @author Steele Dalton (PhET Interactive Simulations)
 */

import Property from '../../../../axon/js/Property.js';
import ScreenView from '../../../../joist/js/ScreenView.js';
import { Node, Text } from '../../../../scenery/js/imports.js';
import ComboBox from '../../../../sun/js/ComboBox.js';
import exampleSim from '../../exampleSim.js';

class MagnetsScreenView extends ScreenView {

  /**
   * @param {MagnetsModel} model - the top-level model for this screen
   */
  constructor( model ) {

    super();

    const values = [ 'one', 'two', 'three', 'four', 'five', 'six' ];
    const items = [];
    values.forEach( value => {
      items.push( {
        value: value,
        node: new Text( value )
      } );
    } );

    const selectedItemProperty = new Property( values[ 0 ] );

    const listParent = new Node();


    const comboBox = new ComboBox( selectedItemProperty, items, listParent, {
      highlightFill: 'yellow',
      listPosition: 'below'
    } );


    this.addChild( comboBox );
    this.addChild( listParent );
  }
}

exampleSim.register( 'MagnetsScreenView', MagnetsScreenView );
export default MagnetsScreenView;

```