DrupalでBoostrap導入よりBetter Exposed Filtersの検索条件折りたたむ機能喪失

記事カテゴリ

drupal

タグ

bug

views

jQuery

問題点：Bootstrap導入よりViewsモジュールのBetter Exposed Filtersの折りたたむ機能が利かなくりました

Bootstrap導入よりBeter Exporsed Filtersレイアウトへの影響は「DrupalでBootstrapテーマ導入後にモジュールViewsのBetter Exposed Filtersのレイアウト崩れ」をご参考ください
Better Exposed Filtersの折りたたむ機能（filter collapse）がしなくなりました
これが修復しないと、Better Exposed Filtersの使用価値が大分下がります

原因：BootstrapモジュールよりBetter Exposed Filtersのcollapse機能を消してしまいました

BootstrapがなぜBetter Exposed Filtersのcollapse機能を消したかは不明です（調査する時間がなく）

ここで、消された要素を復元するのではなく、Bootstrapに消されたままで、既存の要素をBootstrapのcollapse機能するjavascriptでページロード時に追加します

    var collapse_control=jQuery('.views-exposed-form legend.panel-heading', context);
    collapse_control.attr('data-toggle','collapse');
    collapse_control.attr('data-target','.views-exposed-form .panel-body');
    jQuery('.views-exposed-form .panel-body', context).addClass('collapse');

上記コードよりフィルタの折りたたむ機能を回復しました

シリーズ記事一覧

記事カテゴリ

drupal

タグ

Views

DrupalのBootstrapテーマが細かいところまでDrupalの各部分を対応しきれていない

背景：Drupal7.56、Bootstrap7.x-3.13
BootstrapテーマがDurpalの各部分をすべて対応しきれていない現状です。
前回紹介した「DrupalでBoostrap導入よりBetter Exposed Filtersの検索条件折りたたむ機能喪失」がその例の一つです

今回の例ではViewsの外部設置フィルター（チェックボックス）のレイアウトが崩れ

モジュール（Views）で、外部設置フィルター（例：カテゴリ、チェックボックスでフィルター一覧表示）を作成
以下のイメージのようにチェックボックスのフィルターレイアウトが崩れています

原因：Bootstrapのフォーム関連css（クラス名：.form-control）のプロパティにミスマッチ

主な原因としては、Bootstrapのform-controlクラスをチェックボックスのラップdivに追加されたせいだと思います

Bootstrapのform-controlクラスに、高さが34pxに固定してしまいました

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

修正：cssでチェックボックスのラップdivのプロパティを修正

Boostrapのカスタムstyle.cssに以下のcssコードを追加して、外部設置フィルター（チェックボックスのラップdiv）を修正します

.views-exposed-form .views-exposed-widget .form-item.form-type-select.form-group .form-control.form-checkboxes {
  width: inherit;
  height: inherit;
}
.views-exposed-form .views-exposed-widget .form-item.form-type-select.form-group .form-control.form-checkboxes input[type="checkbox"] {
  width: 18px;
  display: inline-block;
  height: 18px;
  vertical-align: middle;
}

主に外部設置フィルターのラップdivの横/高さ、およびチェックボックスのサイズと表示設定を行います