Contrib.social

Use the Drupal core CSS class to hide form elements when JavaScript is enabled

Open on Drupal.org →
Created on 26 March 2023, over 2 years ago
Updated 16 July 2024, 12 months ago

The form examples show how to add graceful degradation so AJAX behavior can work when JavaScript is disabled. This is done with a submission button that's hidden with a CSS class.

    // Since we don't know if the user has js or not, we always need to output
    // this element, then hide it with with css if javascript is enabled.
    $form['instrument_family_fieldset']['choose_family'] = [
      '#type' => 'submit',
      '#value' => $this->t('Choose'),
      '#attributes' => ['class' => ['ajax-example-hide', 'ajax-example-inline']],
    ];

This is using a custom CSS class.

However, Drupal core already provides a CSS class for the same purpose.

/**
 * For anything you want to hide on page load when JS is enabled, so
 * that you can use the JS to control visibility and avoid flicker.
 */
.js .js-hide {
  display: none;
}

The example should use the CSS class already defined from Drupal core, instead of using a new CSS class.

📌 Task
Status

Fixed

Version

4.0

Component

AJAX Example

Created by

🇬🇧United Kingdom joachim

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024