Commit 1cdbfdc4 authored by Ivica Puljic's avatar Ivica Puljic Committed by Ivica Puljic
Browse files

Issue #3304161 by pivica: Floating labels JS code is not executed for ajax loaded form elements

parent 737eeb32

themes/bs_bootstrap/bs_bootstrap.libraries.yml

+1 −1
Original line number Diff line number Diff line
@@ -52,8 +52,8 @@ floating-labels: 
    component:

      css/components/floating-labels.css: {}

  dependencies:

    - core/jquery

    - core/drupal

    - core/once



floating-labels-filled:

  css:

themes/bs_bootstrap/js/floating-labels.js

+34 −37
Original line number Diff line number Diff line 
/**

 * @file floating-labels.js

 *

 * Select change handler for the floating labels and set select width when it's narrower than the label.

 * Adjust form element width based on floating label size.

 */



(function ($, Drupal) {

(function (Drupal, once) {



  'use strict';
@@ -13,15 +13,14 @@ 
      // For IE11 and old Edge we will fallback to placeholders - labels are

      // hidden in CSS and here we will apply labels values to placeholders.

      if (/Trident/.test(navigator.userAgent) || /Edge/.test(navigator.userAgent)) {

        $('.form--floating-labels', context).once('floating-labels').each(function () {

          $(this).find('.form-group--floating-label:not(.form-no-label) .form-control').each(function (i, el) {

        var controls = once('floating-label', '.form-group--floating-label:not(.form-no-label) .form-control', context);

        controls.forEach(function (el, i) {

          var label = el.parentNode.querySelector('label').innerText;

          if (el.required) {

            label += ' *';

          }

          el.setAttribute('placeholder', label);

        });

        });



        // There is no point executing the rest of behavior for IE/Edge

        // browsers.
@@ -30,16 +29,15 @@ 


      // Fixes the width of the form controls if the label is wider than the

      // form control.

      $('.form--floating-labels', context).once('floating-labels').each(function () {

        $(this).find('.form-group--floating-label:not(.form-no-label)').each(function (i, el) {

      var elements = once('floating-label', '.form-group--floating-label:not(.form-no-label)', context);

      elements.forEach(function (el, i) {

        var control = el.querySelector('.form-control, .form-select');

        var label = el.querySelector('label');

        if (control.offsetWidth < label.offsetWidth) {

          var paddingRight = parseFloat(window.getComputedStyle(control).getPropertyValue('padding-right'));

          var adjustedWidth = label.offsetWidth + paddingRight;

            // Respect maximum parent width (when controls are in the grid,

            // etc).

            if (adjustedWidth > this.offsetWidth) {

          // Respect maximum parent width (when controls are in the grid, etc).

          if (adjustedWidth > el.offsetWidth) {

            adjustedWidth -= paddingRight;

          }

          control.style.minWidth = adjustedWidth + 'px';
@@ -58,8 +56,7 @@ 
          });

        }

      });

      });

    }

  };



}(jQuery, Drupal));
 
}(Drupal, once));