Provided patch (see first comment) allows to add classes to component wrapper theme function using 

function hook_process_webform_element(&$variables){
  $variables['element']['wrapper_classes'][] = 'class1';  
  $variables['element']['wrapper_classes'][] = 'class2';  
}

This is extremely helpful if each component needs to be specially styled.

CommentFileSizeAuthor
#4 webform-classes_for_component_wrapper-1701054-4.patch897 bytesalex.skrypnyk
#2 webform-classes_for_component_wrapper-1701054-2.patch891 bytesalex.skrypnyk
#1 webform-classes_for_component_wrapper-1701054-1.patch2.23 KBalex.skrypnyk

Comments

alex.skrypnyk’s picture

alex.skrypnyk
he/him
Primary language English
Location Melbourne
commented
Status: Active » Needs review
Issue tags: +CSS, +class, +wrapper
StatusFileSize
new webform-classes_for_component_wrapper-1701054-1.patch2.23 KB

Patch attached.

alex.skrypnyk’s picture

alex.skrypnyk
he/him
Primary language English
Location Melbourne
commented
StatusFileSize
new webform-classes_for_component_wrapper-1701054-2.patch891 bytes

Please disregard patch above and use another patch attached to this comment.

quicksketch’s picture

quicksketch
he/him
commented
Status: Needs review » Needs work

Any item that is a "property" (such as classes) needs to be prefixed with a "#" sign in Drupal's FAPI, otherwise the item will be considered a separate form element. This issue may also be of interest to you: #536236: Custom CSS classes for form components.

alex.skrypnyk’s picture

alex.skrypnyk
he/him
Primary language English
Location Melbourne
commented
Status: Needs work » Needs review
StatusFileSize
new webform-classes_for_component_wrapper-1701054-4.patch897 bytes

quicksketch, you are 100% right.
It slipped my mind that property needs to be '#' prefixed.
Sorry for the trouble.
New patch attached.

quicksketch’s picture

quicksketch
he/him
commented
Status: Needs review » Fixed

This has been fixed by the issue mentioned in #3. We borrowed the approach used by D8, which is to support any arbitrary attributes on the wrapper by using #wrapper_attributes:

  $wrapper_attributes = isset($element['#wrapper_attributes']) ? $element['#wrapper_attributes'] : array('class' => array());
  $wrapper_classes = array(
   'form-item',
   'webform-component',
   'webform-component-' . $type,
  );
  if (isset($element['#title_display']) && strcmp($element['#title_display'], 'inline') === 0) {
    $wrapper_classes[] = 'webform-container-inline';
  }
  $wrapper_attributes['class'] = array_merge($wrapper_classes, $wrapper_attributes['class']);

It's not the same implementation, but it solves the same problem. See #536236: Custom CSS classes for form components.

Automatically closed -- issue fixed for 2 weeks with no activity.