Download & Extend

collapsible fieldset problems with #prefix, #suffix, markup rendering

Project:Drupal core
Version:7.x-dev
Component:forms system
Category:bug report
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

Putting markup in a form in a collapsible fieldset doesn't work well unless it's wrapped in a <p> or <div> (apparently). If I put just text, the text falls outside the collapsed region and still shows when the fieldset is collapsed.

Sample code:

<?php
function mymodule_form_alter(&$form, $form_state, $form_id) {
  if (isset(
$form['#node']) && $form['#node']->type .'_node_form' == $form_id) {
   
$form['ggg'] = array(
     
'#type' => 'fieldset',
     
'#title' => t('Test'),
     
'#collapsible' => TRUE,
     
'#collapsed' => TRUE,
     
'#tree' => TRUE,
     
'#weight' => -2,
    );   
   
$form['ggg']['node_type'] = array(
     
'#type' => 'select',
     
'#title' => t('Node type'),
     
'#options' => node_get_types('names'),
     
'#suffix' => 'hello!',
      );   
   
$form['ggg']['hoho'] = array(
     
'#value' => 'hohoho',
      );
  }
}
?>

resulting HTML page source:

<fieldset class=" collapsible collapsed"><legend>Test</legend><div class="form-item" id="edit-ggg-node-type-wrapper">
<label for="edit-ggg-node-type">Node type: </label>
<select name="ggg[node_type]" class="form-select" id="edit-ggg-node-type" ><option value="booo">Book page</option><option value="page">Page</option><option value="story">Story</option></select>
</div>
hello!hohoho</fieldset>

The problem may be this code in collapse.js:

.after($('<div class="fieldset-wrapper"></div>').append(fieldset.children(':not(legend)')));

but in mucking around, I haven't figured out how to make it work

Comments

#1

Title:collapsible fieldset probelms with #prefix, #suffix, markup rendering» collapsible fieldset problems with #prefix, #suffix, markup rendering

#2

Subscribing.
Issue also exists in Drupal 5.

Workaround (from http://drupal.org/node/37070): use '#type' => 'item' instead of 'markup' (the default)

#3

Status:active» needs review

The code that pwolanin told about was the cause, children() function doesn't include text nodes.
Changed to use contents().

AttachmentSizeStatusTest resultOperations
collapse_all_content.patch624 bytesIgnored: Check issue status.NoneNone

#4

From the jQuery docs, this indeed looks logical. Need some testing.

#5

Version:6.x-dev» 7.x-dev

Still applies. Moved to d7.

AttachmentSizeStatusTest resultOperations
collapse_all_contents_b.patch624 bytesIdleFailed: Failed to apply patch.View details | Re-test

#6

Hi, any demo for this ?
Thanks

#7

Status:needs review» needs work

The last submitted patch failed testing.

#8

Subscribing

#9

subscribing@

#10

Status:needs work» needs review

Marked #570010: Text nodes within collapsible fieldsets don't collapse a duplicate of this.

Here's an updated patch. Note that .contents() does not have an expression parameter as .children() does, as it makes little sense to use jQuery to filter out text nodes. So I used the .filter() function in addition to the .contents() function to accomplish this.

Rfay recently convinced me to use git for core patches, so I'm trying it out and this is my first patch created using git, so sorry if it doesn't apply properly, I'm still learning how to use it. Assuming the test bot passes it, however, this should be good to go. Marking this as a quick fix as well.

AttachmentSizeStatusTest resultOperations
152431-01.patch732 bytesIdlePassed: 13347 passes, 0 fails, 0 exceptionsView details | Re-test

#11

I don't know enough jQuery to say for sure this is the best way to do it, but I can confirm that it works as advertised.

#12

subscribe

#13

Status:needs review» needs work

shorter return this.nodeType != 1 || $(this).is(':not(legend):not(.action)'); and the code comment does not help much, I clarified with cwgordon7 that he wanted to say If this is an HTML element, not a text node

#14

The code comment should be something like: “jQuery’s .children() function only considers element DOM nodes but ignores text nodes completely. Therefore, we have to filter manually to include all non-element DOM nodes”.

#15

Status:needs work» needs review

Thanks, rerolled with more comments and shorter logic.

AttachmentSizeStatusTest resultOperations
152431-2.patch887 bytesIdlePassed: 13338 passes, 0 fails, 0 exceptionsView details | Re-test

#16

Status:needs review» needs work

I’m getting this error in Safari 4: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3"

#17

Version:7.x-dev» 6.x-dev

Fixed in D7: #676800: Fieldsets break design badly

#18

Status:needs work» closed (duplicate)

Since this was already fixed in another issue, marking this duplicate.

I honestly don't think backporting this to D6 is going to be feasible, but if that's what you want to do then mark the other issue as patch (to be ported).

#19

Version:6.x-dev» 7.x-dev
Status:closed (duplicate)» active

This is not fixed. If a collapsed fieldset just contains item/markup contents, then it is not shown correctly. For example, the following $form does not display correctly, but if the #collapsed line is commented out, it works fine.

<?php
  $form
= array (
   
'start' => array (   
     
'#tree' => true,
     
'#type' => 'fieldset',
     
'#collapsed' => true, // change this line
     
'#collapsible' => true
     
'system' => array (     
       
'#type' => 'item',
       
'#title' => 'system module',
       
'#markup' => '<em>system</em> module can not be updated. Its schema version is 0. Updates up to and including 7069 have been removed in this release. In order to update <em>system</em> module, you will first <a href="http://drupal.org/upgrade">need to upgrade</a> to the last version in which these updates were available.',
       
'#prefix' => '<div class="messages warning">',
       
'#suffix' => '</div>',
      ),
    ),
  );
?>

Still happens with D8 also.

AttachmentSizeStatusTest resultOperations
collapsed form.jpg14.05 KBIgnored: Check issue status.NoneNone
not collapsed form.jpg36.38 KBIgnored: Check issue status.NoneNone