Increase the height of the Select box

Well the *easiest* solution is to simply use CSS to size the box to whatever you want. If you've going to make the list as big as the entire list and you want multiple selection, I'd recommend using checkboxes (uncheck the "Listbox" in the component) instead since they'll take the same amount of space and are signficantly easier for end-users (many of which do not understand shift- or control-clicking).

Modifying CSS is the easiest solution? From who's perspective?

If an end user doesn't know css or even have access to the css files, css is not the *easiest* solution, it's the impossible solution.

Checkboxes aren't really practical when you have several dozen options. Also, if your users tend to be more advanced, they won't have any problem at all using a listbox.

The CSS advice was aimed at you, in your role as the admin/dev person posting to the issue queue, not to the end user selecting pizza's, t-shirts or whatever on your site. Use CSS to resize the listbox. It is possible.

How is a listbox with 'several dozen options' (where users will need to control-click to select) easier on end-users than several dozen checkboxes (where they just click with the mouse as they're used to doing)?

From an end-user's perspective, if the only way to change the height of a listbox is to pay (or beg) a developer do it, that's not a good thing, IMO. That's probably an option that should be built into the module.

Checkboxes simply aren't practical if you have a lot of options. They would fill the whole page, causing a scrolling nightmare. That's not good from a usability perspective. Listboxes, while not ideal, are certainly preferable to checkboxes in certain situations.

Unfortunately not everybody's idea of a good idea is likely to be added as functionality. CSS is the way to go in this case and Googling some CSS tutorials will show you what needs doing. The software (i.e. Drupal and Webform) is free, but sometimes you gotta get hands dirty to get precisely the effect you want.

From a usability perspective, for the folks who will be using your Webform, you will probably find that more of them know how to use checkboxes and very few of them know how to multi-select in a listbox. You will also find that a dropdown list of X number of options will not be vastly shorter/smaller than an equal list of checkboxes.

I don't know what kind of clients you deal with, but requiring an office secretary to learn css to change the height of a listbox is not an option.

And again, if the users of a website are more savvy, they won't have an issue with listboxes.

It seems like your solution is to "not use listboxes." That's fine, everyone has their own opinion about what makes a site usable. But for those who have clients that want to use them, it should be far easier to change the height.

I'm not planning on adding this functionality to Webform, as has been stated above:

- Checkboxes are generally a better solution for end-users than multiple selects.
- The "height" option would not have any effect on non-select elements such as checkboxes and radios, causing confusion about what the option would be used for.
- You can already adjust the height with a small amount of CSS. If you don't want to put it in a CSS file, you could add a "markup" component, set it to "Full HTML" and use something like this:

.webform-component-my-select select {
  height: 200px;
}

No this isn't as "easy" as an option directly in Webform for "height", but considering the majority of forms will use checkboxes over radios (as they should) I don't want to add options that are confusing or irrelevant to other field types. Setting the height on a select list is an obscure option requirement and I don't think it's unfair that an obscure requirement would need the most trivial level of CSS knowledge.

Its easy to increase size...

Just use " '#size' => 25, "

Ex:

$form['payment_methods'] = array(
'#type' => 'select',
'#title' => t('Student Names'),
'#options' => $cat_option,
'#multiple' => TRUE,
'#size' => 25,
'#description' => t('Select Passed Students names from above list'),
'#required' => TRUE,
);

The following may be helpful for those looking to increase the height of a select list box on a node/edit form in Drupal 7...

To do this, you can write a simple custom module and use hook_form_alter() to add a #size attribute.

This technique is described here:
http://drupal.org/node/1561658

I just did it using CSS. Eg:

select.group-audience {
    max-height: 250px;
    padding: 6px;
    width: 300px;
    font-size: 13px;	
}

You could use just height rather than max-height if you want a fixed height.

Typically people simply put such CSS directly in their theme's CSS files.

Yes, as quicksketch said, I put this into my theme CSS.

using adaptive theme / corolla, it didn't work using

max-height: 250px;

but it does with

height: 250px;

There seems to be some confusion around the #size attribute and whether it changes width or height of a select list box.

I can confirm that I have used the #size attribute to increase the height of a select list box on a form displayed in the admin theme (in Drupal 7).

I did this using hook_form_alter in a custom module. ( See my earlier comment on this thread: http://drupal.org/node/1090828#comment-6179568 )

(Specifically, I increased the height of a Term reference field which uses the Select list widget.)

Technically, for this type of field, the #size attribute doesn't refer to a height measurement, but rather the number of items that should be visible in the select list. So, the more items that are displayed, the larger the height of the field.

Of course, CSS can also be used for changing field sizes. However, in my case, I wanted to change the size of a field that was displayed in the administration theme. So, adding CSS to my site's theme would not apply there.

-Dave

cmsdave is correct

Try this to modify Select list Height & width drupal Way

// Increase Height of Select list
$form['field_example1']['und']['#size'] = 15;

// Increase Height of Select list
$form['field_example2']['#size'] = 20;

Try this to modify Select list Height & width drupal Way

// Increase Height of Select list
$form['field_example1']['und']['#size'] = 15;

// Increase Height of Select list
$form['field_example2']['#size'] = 20;

Where should I add/edit this code? In which file?

@arael3 What version of Webform/Drupal are you using?

For Webform 3 & 4 (Drupal 7), you would need to use a form alter hook.

For Webform 5 (Drupal 8), you would need to use a custom property or wait for #3058165: Add support for #size property for multiple select elements.

@jrockowitz
How can we use a custom #size property for multiple select elements in Webform 5 (Drupal 8) ?
Is the Wrapper custom attribute YAML should be used ?
It might be trivial but I am not very good in css.