メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • DrupalでBoostrap導入より外部設置検索条件(チェックボックス)のレイアウトが崩れる

DrupalでBoostrap導入より外部設置検索条件(チェックボックス)のレイアウトが崩れる

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

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

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

  • モジュール(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の横/高さ、およびチェックボックスのサイズと表示設定を行います

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads