Contrib.social

Wrong positioned cross when used in initially collapsed "Details" element

Open on Drupal.org →
Created on 15 June 2016, over 9 years ago
Updated 7 February 2023, over 2 years ago

Problem/Motivation

When the focal point widget is used within a collapsible Details element, which is collapsed initially, the cross indicating the focal point is positioned wrong:

(I made the corresponding focal point settings field visible to show the real values that should be respected when the cross is positioned. You can also see the CSS applied to the cross)

Proposed resolution

Use correct position for cross regardless of whether the image/container is visible initially.

Steps to reproduce

  • Create an image field or base field definition of type image for the node entity type - e.g.: 
    /**
 * Implements hook_entity_base_field_info().
 */
function YOUR_MODULE_entity_base_field_info(EntityTypeInterface $entity_type) {
    $fields['FIELD_NAME'] = BaseFieldDefinition::create('image')
      ->setLabel('Image')
      ->setDescription('The image.')
      ->setRevisionable(TRUE)
      ->setTranslatable(TRUE)
      ->setSetting('alt_field', 0)
      ->setSetting('file_directory', 'images/[date:custom:Y]-[date:custom:m]')
      ->setDisplayOptions('form', array(
        'type' => 'image_image',
        'weight' => 10,
        'settings' => array(
          'preview_image_style' => 'thumbnail',
        ),
      ))
      ->setDisplayOptions('view', array(
        'type' => 'hidden',
      ));

  return $fields;
}
  • Create custom Details element and move image field into it: 
    /**
 * Implements hook_form_FORM_ID_alter().
 */
function YOUR_MODULE_form_node_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Create details element.
  $form['GROUP_NAME'] = [
    '#type' => 'details',
    '#group' => 'advanced',
    '#title' => t('Group name'),
    '#open' => FALSE, // Initially collapse details element.
    '#attributes' => array(
      'class' => array('node-form-group-name'),
    ),
    '#weight' => -20,
    '#optional' => FALSE,
  ];

  // Add field to details element.
  $form['FIELD_NAME']['#group'] = 'GROUP_NAME';
}
  • Create node with image with custom focal point
  • Edit that node again and expand details element to see nested image field - cross is not positioned correctly
🐛 Bug report
Status

Needs review

Version

1.0

Component

Miscellaneous

Created by

🇩🇪Germany hctom

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024