A page on my site which contains a Webform with Arrange Fields fails the W3C validator test because of the presence of a style tag which is outside of head and doesn't have a type attribute.

To fix this I have changed the code between lines 852 to 876 inclusive of arrange_fields.module (inside the function arrange_fields_form_alter())

    if ($GLOBALS["arrange_fields_editing"] != $form_id) {
      // Meaning, we are not currently arranging this form.  The user
      // must actually be putting data into it on the node/edit page.  
      // Let's remove the extra
      // styles around the various divs so that it looks more natural.
      $css_markup .= "
      
      .arrange-fields-container {
        border: 0;
        background: none;
      }
      
      .arrange-fields-container .draggable-form-item {
        border: 0;
        background-color: transparent;
      }
      
      ";
    }
    
    // Now, add in our css markup and markup elements...
    $form["arrange_fields_css_markup_and_elements"] = array(
      "#value" => "<style>$css_markup</style>$markup_elements",
      "#after_build" => array("arrange_fields_add_form_css_js"),  // important if the form fails validation, we still get the CSS and JS added in.
    );

to

    if ($GLOBALS["arrange_fields_editing"] != $form_id) {
      // Meaning, we are not currently arranging this form.  The user
      // must actually be putting data into it on the node/edit page.  
      // Let's remove the extra
      // styles around the various divs so that it looks more natural.
      $css_markup .= "
      
      #$fid {
        border: 0;
        background: none;
      }
      
      #$fid .draggable-form-item {
        border: 0;
        background-color: transparent;
      }
      
      ";
    }
    
    // Now, add in our css markup and markup elements...
	drupal_set_html_head('<style type="text/css">' . $css_markup . '</style>');
	
    $form["arrange_fields_css_markup_and_elements"] = array(
      "#value" => $markup_elements,
      "#after_build" => array("arrange_fields_add_form_css_js"),  // important if the form fails validation, we still get the CSS and JS added in.
    );

The changes made to the CSS selectors are to increase specificity as the dynamically generated styles are now output above the link to the arrange_fields.css stylesheet (I'm using a Zen sub-theme).

Could this, or something like it, please be added to a future release?

Thanks,

David

Comments

DaveyM’s picture

DaveyM commented
Issue summary: View changes

Changed whitespace on first line of code examples

richardp’s picture

richardp commented

Sure, that all looks fine to me. I will put those changes in place for both the 6 and 7 branch.

Thanks!
Richard

richardp’s picture

richardp commented

Actually-- scratch that (sort of).

I can still set the type of the style tag to text/css, and I can still use the $fid instead of the generic class, but I cann't use drupal_set_html_head.

The reason is because if your form fails validation (like you do not enter a required field), when the page reloads it's all wonky. This is because hook_form_alter doesn't get called a second time. Instead the form is just loaded from cache.

The other changes I am happy to include in the next release though ;)

Richard

richardp’s picture

richardp commented
Version: 6.x-1.x-dev » 6.x-1.6
Status: Active » Fixed

Okay, this is now in the 6.x-1.6 release! I've also added similar code for 7.x

Thanks
Richard

DaveyM’s picture

DaveyM commented
Status: Fixed » Needs review

Hi Richard,

I think I may have come up with a work-around that uses the after_build callback. Changing lines 885-889 from

    // Now, add in our css markup and markup elements...    
    $form["arrange_fields_css_markup_and_elements"] = array(
      "#value" => "<style type='text/css'>$css_markup</style>$markup_elements",
      "#after_build" => array("arrange_fields_add_form_css_js"),  // important if the form fails validation, we still get the CSS and JS added in.
    );

to 

    // Now, add in our css markup and markup elements...    
    $form['arrange_fields_head_css'] = array( 
      '#type' => 'value',
      '#value' => "<style type='text/css'>$css_markup</style>"
    );
	
    $form["arrange_fields_css_markup_and_elements"] = array(
      "#value" => $markup_elements,
      "#after_build" => array("arrange_fields_add_form_css_js"),  // important if the form fails validation, we still get the CSS and JS added in.
    );

and lines 922-928 from 

function arrange_fields_add_form_css_js($element) {
  drupal_add_css(drupal_get_path("module", "arrange_fields") . "/css/arrange_fields.css");    
  drupal_add_js(drupal_get_path("module", "arrange_fields") . "/js/arrange_fields_node_edit.js");    
  
  return $element;
  
}

to

function arrange_fields_add_form_css_js($element, &$form_state) {
  drupal_add_css(drupal_get_path("module", "arrange_fields") . "/css/arrange_fields.css");    
  drupal_add_js(drupal_get_path("module", "arrange_fields") . "/js/arrange_fields_node_edit.js");    
  
  drupal_set_html_head($form_state['values']['arrange_fields_head_css']);
  
  return $element;
  
}

Seems to load the style tag into the head tag when the webform fails validation. Does it look ok to you?

Thanks,

David

DaveyM’s picture

DaveyM commented
Issue summary: View changes

Added whitespace at beginning of code examples

richardp’s picture

richardp commented

Interesting approach! I like it. I will try to have this in the next release.

Thanks,
Richard

richardp’s picture

richardp commented
Status: Needs review » Closed (won't fix)

After some tinkering, I decided to leave the style tag as it was in 7x due to simplicity reasons.

Thanks
Richard

richardp’s picture

richardp commented
Issue summary: View changes

Removed angle brackets used in explanation