1

Currently I have a select box in a form as follows :

$form['fieldset']['event_trigger'] = array('#type' => 'select',
    '#title' => t('E-mail event trigger'),
    //'#default_value' => $edit['mail'],
    '#size' =>20
    //'#options' => select_eventtrigger_dropdown(),
    '#description' => t('A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.'),
    '#required' => TRUE,
  );

But here #size attribute is not fitting my requirement. It should have been the width of the select box. How can I achieve this or is there any workaround?

  • use css by the ID or any other selector that is related to this select box – M a m a D Jul 20 '15 at 8:15
1

The size attribute you are trying to set there is related to how many items are shown at one time. So in those terms the height would increase and it would show a scrolling list of items to choose from if you added size to the select box. See Form API Docs for more information.

You need to target the select box with CSS to change the width (most themes/browsers set the width of a select box to width: auto; so it would be as long as the longest item to be selected).

So for instance if you want to set all of your select elements to take up the entire width of their containing divs you would set:

select {
  width: 100%;
}

Or if you want to target all select elements with a class of .form-select you could use:

select.form-select {
  width: 50em;
}

You can use id's also like select#id-of-element but using a class is the more generally accepted best practice for styling (not just in Drupal but general FED practices also).

1

In the Drupal 8 forms api, any form element attributes not directly supported by the API get stuffed into the '#attributes' FormElement property. This property supports the entire HTML spec for form element tag html attributes, as far as I know. It's the catch-all for anything the Drupal development folks don't feel the need to directly define and model.

$form['fieldset']['event_trigger'] = array('#type' => 'select',
    '#title' => t('E-mail event trigger'),
    '#size' =>20
    '#description' => t('A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.'),
    '#required' => TRUE,
    '#attributes' => [
      'style' => 'width: 50em;'
    ],
  );

or (usually preferred)

$form['fieldset']['event_trigger'] = array('#type' => 'select',
    '#title' => t('E-mail event trigger'),
    '#size' =>20
    '#description' => t('A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.'),
    '#required' => TRUE,
    '#attributes' => [
      'class' => 'select-css'
    ],
  );

coupled with a stylesheet:

.select-css {
  width: 50em;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.