Retractable ListBox with multiple values

[mgardes]

Hello,

I need to display a ListBox with multiple values but i can't put a big ListBox on my screen.
I would like the same display that a ListBox with one value but with the possibility to select multiple values.

Is it possible to make this without write our own widget ?

Thanks

[Megan]

Hello Maximilien,

There are a variety of ways to approach solving this issue. One way would to add an onclick event that will use the applyProperty() Profound UI API to change the number of options displayed by changing the height or the select box height properties. In the following example, I use applyProperty() to change the height of the select box. You can check out the result here: https://noderun.com/run/megan_bond/sett ... lt-values/. You can check out the code here: https://noderun.com/ide/megan_bond/sett ... lt-values/.

onblur event and ondblclick event, reset height of listbox:

Code: Select all

applyProperty(this, "height", "65px");

onclick event, expand height of listbox:

Code: Select all

applyProperty(this, "height", "calc(100% - 30px)");

You may notice in the onclick event that I used "calc(100% - 30px)" for the height value. This is because the listbox is placed 15px from the top and I want it to end 15px before the end of its container element.The keyword 'this' refers to the element that triggered the event and is provided to the event for you.

The code above will expand and contract the listbox but it won't animate the transition. It will simply switch from one size to the other instantly. To animate the transition, CSS can be used to have the browser handle it. Below is the CSS class I used to animate the listbox height change.

Code: Select all

.pui-height-transition {
  
  -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;

}

CSS would be added to an outside file and either linked or, if put in the custom folder of a Profound UI or PJS instance, it will be pulled in automatically. Because noderun doesn't have this, I used the external css property to link ~/workspace/public/styles/styles.css.

The properties:

listbox.png (15.09 KiB) Viewed 458 times

The result:

listbox.gif (116.86 KiB) Viewed 458 times

I hope this helps!

Thanks,

[k2R400]

Very interesting answer, I put in my tips and tricks !