Fieldset behaviour conflicting with Conditional module

Created on 8 November 2023, 8 months ago

Context

Using Drupal's latest version with Panels, Field Group and Conditional Fields modules enabled.
I have an entity with some common fields(text and checkbox) and some of them are grouped inside a few fieldsets. The first field is a radio button which, according to the selection, triggers a specific group of fields inside one of the fieldsets to be displayed.

Problem

Using Bootstrap theme makes the fieldset outer structure visible, but the fields inside are not displayed. The idea is to hide the entire fieldset when no field is intended to be shown according to the previous selection on the radio button field.
Using Bartik or Seven theme, everything works fine. The problem occurs when the Bootstrap theme is active.

While trying to debug the problem, I noticed some differences Bootstrap's and Bartik/Seven's classes.

  <!-- Bartik/Seven 7.98 -->
  <fieldset class="group-fd-test field-group-fieldset form-wrapper" style="display: none;">
    <legend><span class="fieldset-legend">Fieldset test mode</span></legend>
    <div class="fieldset-wrapper">
      <div class="field-type-text field-name-field-text-field-1 field-widget-text-textfield form-wrapper" id="edit-field-text-field-1" style="display: none;">
        <div id="field-field-text-field-1-add-more-wrapper">
          <div class="form-item form-type-textfield form-item-field-text-field-1-und-0-value">
            <label for="edit-field-text-field-1-und-0-value">Field text 1</label>
            <input class="text-full form-text" type="text" id="edit-field-text-field-1-und-0-value" name="field_text_field_1[und][0][value]" value="" size="60" maxlength="255">
          </div>
        </div>
      </div>
      <div class="field-type-text field-name-field-text-field-2 field-widget-text-textfield form-wrapper" id="edit-field-text-field-2" style="display: none;">
        <div id="field-field-text-field-2-add-more-wrapper">
          <div class="form-item form-type-textfield form-item-field-text-field-2-und-0-value">
            <label for="edit-field-text-field-2-und-0-value">Field text 2</label>
            <input class="text-full form-text" type="text" id="edit-field-text-field-2-und-0-value" name="field_text_field_2[und][0][value]" value="" size="60" maxlength="255">
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- Bootstrap 7.x-3.27 -->
  <fieldset class="group-fd-test field-group-fieldset panel panel-default form-wrapper" id="bootstrap-panel--5">
    <legend class="panel-heading"><span class="panel-title fieldset-legend">Fieldset test mode</span></legend>
    <div class="panel-body" id="bootstrap-panel-5-body">
      <div class="field-type-text field-name-field-text-field-1 field-widget-text-textfield form-wrapper form-group" id="edit-field-text-field-1" style="display: none;">
        <div id="field-field-text-field-1-add-more-wrapper">
          <div class="form-item form-type-textfield form-item-field-text-field-1-und-0-value form-group">
            <label class="control-label" for="edit-field-text-field-1-und-0-value">Field text 1</label>
            <input class="text-full form-control form-text" type="text" id="edit-field-text-field-1-und-0-value" name="field_text_field_1[und][0][value]" value="" size="60" maxlength="255">
          </div>
        </div>
      </div>
      <div class="field-type-text field-name-field-text-field-2 field-widget-text-textfield form-wrapper form-group" id="edit-field-text-field-2" style="display: none;">
        <div id="field-field-text-field-2-add-more-wrapper">
          <div class="form-item form-type-textfield form-item-field-text-field-2-und-0-value form-group">
            <label class="control-label" for="edit-field-text-field-2-und-0-value">Field text 2</label>
            <input class="text-full form-control form-text" type="text" id="edit-field-text-field-2-und-0-value" name="field_text_field_2[und][0][value]" value="" size="60" maxlength="255">
          </div>
        </div>
      </div>
    </div>
  </fieldset>

It seems that Bootstrap doesn't allow the rule display: none to be set on the fieldset.

Any ideas how to solve this problem?

Thanks in advance!

πŸ’¬ Support request
Status

Active

Version

3.27

Component

Miscellaneous

Created by

πŸ‡§πŸ‡·Brazil pharamis

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

Comments & Activities

Production build 0.69.0 2024