I want to display a few fieldgroups inside of a Paragraph side-by-side horizontally when in node edit form. I gave each fieldgroup the class .popular in the GUI in manage form display. The fieldgroup is of type Details. I added jquery wrap to a global js file that loads everywhere. I am using .ajaxStop because it works inside of Paragraphs after the ajax call.

(function ($) {
   $(document).ajaxStop(function() {
     $( ".popular" ).wrap( "<div class='col-md-4'></div>" );

The html markup wraps the class twice?

<div class='col-md-4'>
   <div class='col-md-4'>
     <div id="content" class="popular">some content</div>

I have also tried to attach the js to hook_field_widget_paragraphs_form_alter. But the js does not apply.

I was able to fix it by adding .once()

$( ".popular" ).once().wrap( "<div class='col-md-4'></div>" );

Is it better to use .ajaxstop or context behaviors. Example

(function ($) {
'use strict';

Drupal.behaviors.awesome = {
  attach: function(context, settings) {
    $( ".popular" ).once('awesome').wrap( "<div class='col-md-4'></div>" );

  • Using context behaviors is "the Drupal way". – No Sssweat Oct 29 '19 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.