Increase the size of Multi select list box

[skprasadu]

Dan,

I want to increase the size of multi select list box. Default size of 4. Is there a way?

Krishna

[danhunsaker]

The same way you would in HTML - use the "size" attribute:

template = [
  {
    "type": "select",
    "model": "select",
    "label": "select",
    "empty": "nothing selected",
    "multiple": true,
    "attributes": {
      "size": 16
    },
    "autoOptions": "item.value as item.label for item in items"
  }
];

[skprasadu]

Dan, Thanks for your quick reply. I will try this alternative. For now I controlled the size through generic CSS as below,

select[multiple] {
height: 200px;
}

We extensively use your framework while building a quick prototype. This framework is one of the most well thought out one in creating dynamic UI. Great work.

Shortly I will build a small tutorial on how to build a decent crud based application using spring boot and dynamic forms. Please see if you can accept the pull request.

Thanks once again.
Krishna

[skprasadu]

One more question, how to force someone to select select an element from dropdown, I did set required field to true, but when I am processing, it is just accepting if an item is not selected.

Please help me on this.

Krishna

[danhunsaker]

I'm not sure why that's not working... One thing to note is that the required key creates an ng-required attribute on the form element, so the value there needs to follow the format for that. If you want the required attribute instead, use attributes.required instead.

[skprasadu]

When I am setting attributes a control, for example select, it is setting to the label of that control. Not the control itself. Can you fix this issue? for example,

Citizen Country Group  Country Group  Name 

<select class="ng-pristine ng-valid" name="citizen_country_group__country_group_id" ng-model="urlFormData['citizen_country_group__country_group_id']"></select>

when the data cameback, it looked as below,

"citizen_country_group__country_group_id":{"label":"Citizen Country Group Country Group Name","type":"select","options":{"8":{"label":"APAC"}},"attributes":{"ng-change":"if(urlFormData['citizen_country_group__country_group_id'] != 0) urlFormData['citizen__country_id'] = 0"}}

See if there is a fix.

[skprasadu]

I realized that I can use a 'callback' and not use attributes. Thanks