JS Control Height and Number of Drop-down Box Options

1.1 Problem description

When selecting data, there are cases where the options in the drop-down box are all numbers or letters and there are particularly many options. Since the upper and lower intervals of the options in the drop-down box are small, users may face difficulties to identify these options. The recognizability can be improved by increasing the line spacing of the options, as shown below:

1.2 Implementation ideas

Set the line spacing of options through this.options.sonHeight;

Use this.options.maxCount to set the number of options displayed in the drop-down box.

2.1 Example 1: Set the line spacing of drop-down options

1) Select the drop-down box of the parameter panel and add a After Initialization event, as shown below:

The JavaScript code is as follows:

this.options.sonHeight=30; //Limit the line height to 30px

Preview effect:

2.2 Example 2: Control the number of options displayed in the drop-down box

If the drop-down box has a large number of options, in order to make the filling interface more concise, you can limit the number of directly displayed options through JavaScript code, and display the rest through scroll bars.

As shown in the figure below,  after the code of previous example, add a line of code that limits the number of widgets directly displayed:

this.options.maxCount=4; // 4 is the limited number of options to be displayed directly

The effect is as follows:

Note: The two examples in this article do not support mobile terminals.

Example 1:

JS-control height of drop down box widget.cpt

Example 2:

JScontrol the selection number of dropdownbox widget.cpt