Colorbox Node + Webform: изменение размера окна после отправки формы


74

Colorbox Node - очень популярный модуль для открытия контента во всплывающем окне. Он очень удобен для вывода вебформ. Размер окна автоматически подстраивается под размер контента. Но вот заметил одну неприятную штуку - когда мы отправляем неправильно заполненную форму, Друпал нам возвращает сообщение об ошибке и высота контента увеличивается. Но вот размер popup остается прежним из-за чего появляется вертикальный скролл.

Собственно, проблема:
Небольшой js скрипт для решения данной проблемы:
//Перехватываем событие после выполнения ajax запроса
    var originalSuccessCallback = Drupal.ajax.prototype.success;
    Drupal.ajax.prototype.success = function(response, status) {
        originalSuccessCallback.apply(this, arguments);
//Если wrapper внутри окна colorbox, подстраиваем окно под размер контента
        var el = $(this.wrapper);
        if(el.parents('#colorbox').length){
           setTimeout($.colorbox.resize, 100);
        }
    }

Результат:

Update 26.07.2020
Если вам надо добавить автоматическое изменение размеров окна при открытии формы, то можно перехватить событие cbox_complete и выполнить resize:

    $(document).bind('cbox_complete', function(){
        setTimeout($.colorbox.resize, 100);
    });
Добавить комментарий
Может быть интересно

Данный скрипт поможет пересохранить файлы Excel в csv. Может быть полезно перед отправкой прайсов на хостинг для дальнейшей обработки

6
1
Те, кто использует модуль Double field могли заметить, что в текстовой области отсутствует редактор. Бывают случаи, когда для удобства наполнения он просто необходим.
1
По умолчанию при выводе поля с типом text_format Друпал отображает справочную информацию об ограничения того или иного текстового формата. Но не всегда данная информация нужна для конечного пользователя. Приведу способ, которым можно скрыть её вывод. Вариант через css мы не рассматриваем.
1

Вывод меню; Вывод блока; Вывод формы; Вывод представления views

2
Продолжение темы про вывод полей формы в одну строку. На этот раз мы изменим нашу функцию темизации с учетом разметки популярного фреймворка для разработки адаптивных web-проектов - Bootstrap 3.
1