iPad表示で3段組レイアウトくずれ！
今回は3段組のレイアウトがiPadに表示しようとすると、レイアウトがくずれた。詳細は以下のとおり。
原因
これは調査結果です。iPad表示の場合はボタン（私はボタンウィジェットを並べてみたので）の幅の指定に、”flex 0 1 50%”というスタイルが付加されるのが原因。元々の仕様では、パソコンは3段組だがiPadは縦3列に並ぶように設計されているようです。
しかし、スマートフォンならいざ知らず、広いiPad画面ではそのまま3段組にすることにした。つまり、このflexスタイルを上書きして消してみることにした。
まずは、Page Builderがはき出HTMLコードから解析！
3段組のHTMLコード
まずは、吐き出されたHTMLコードをみてみよう。
- Page Builderで追加した列。直後のdiv要素も同じ。
- 一番左の段組。ここも直後のdiv要素も同じ
- 段組にいれたボタンウィジェット
その下の④および⑤も段組要素。中身は省略。
上記で、赤枠内のクラスは、修正するために独自に追加したクラス。どこで追加したかは後で記述します。
ここで着目するのが、列も段組はDIV2行分出力され、先頭行は操作することはできないが次行に限ってクラスを追加することができるということ。
それでは、実際のページビルダー画面でクラスを追加していこう。
クラスの追加できる部分
Page Builderでカスタムクラスを追加出来るのが、以下の3カ所。
行単位
指定した列
ボタン（ウィジェット）単位
行単位でつける場合
行単位にクラスを追加する場合は、下図①”行を追加（実際には列を追加と表示されている）”を選ぶ、もし既存の場合は下図③のボタンの中にある編集でおこなう。
以下の図は新規に列を追加する場合で、行単位に”reset_flexwidth_under_grid_cell”というカスタムクラスを追加してみよう。
※行と列を混同しているみたいですが、画面上列と表記されているためで、極力行として統一しています。
まず、最初に?の部分で何列にするか列数を変更しよう。次に右側のペインで、属性というボタンがあるので、これを押して詳細を開いてみよう。その中に”Widget Class”というフィールドがあるので、ここに上記のreset_flexwidth_under_grid_cellを記入する。もしIDで追加した場合は、WidgetIDというフィールド。どちらでも好きな方でかまいません。これで最下行にある”終了”をすると、前述したHTMLコードの?の部分にあるreset_flexwidth_under_grid_cellが追加できました。
次にボタン単位でクラスを追加する場合を書きます。ボタン単位というと少し語弊がありますが、列に追加したウィジェット単位というのが正しいですね。ただ私はボタンを追加したのでボタン単位となります。
ボタン単位のクラスの追加
下の図は先頭の列にすでに、コロナウィルスまとめというボタンウィジェットが追加されています。この右上付近をマウスでクリックすると、下のような”編集／重複／削除”メニューが表示されます。一番最初は何も表示されていません。
ここで、”編集”をクリック。そして、下図のように表示されたら、前項と同じように右側部分のウィジェットスタイルをひらいて、Widget ClassまはたWidget IDに、追加したいクラス名を入力します。
指定した列に追加する場合
これは、上記のボタンというかウィジェットそのものにクラスを追加するのではなく、3段組を例とすると先頭の列やそれ以外の指定の列そのものにクラスを追加する場合です。これは少しわかりにくいかも知れません。
最初の行単位とおなじように、列の追加または編集の際に、3段組のレイアウトのどれかをクリックすると右側にウィジェットスタイルに、”Cell Style”の項目が追加されます。ここなら、指定した列にのみクラスの追加またはIDの追加ができます。
それでは、修正方法がわかったところで実際にやってみよう！
問題のflexスタイルはどこに位置づけられているか？
上で示したHTMLコードの番号でいうと②、④、⑤行のpanel_grid_cellに定義されている。でもここで問題が発生！
クラスを設定できるのは、その上かその下の行で、ちょうど ②、④、⑤行 のpanel_grid_cellクラス定義にはクラスの設定をできない。そんな時に使うのが子セレクタ。A>Bというやつだ。
上記の例で言えば、
.reset_flexwidth_under_gredcell > .panel_gred_cel{
flex:none;
}
とやればいい。
まとめ
はい！もう治りましたね。私の修正方法としては、行単位の部分にreset_flexwidth_under_grid_cellというカスタムクラスを定義して、flexスタイルを強制的に未定義”none”状態にしました。使用したプラグインのバージョンは、Page Builder by SiteOriginが2.10.13、SiteOrigin Widgets Bundleが1.15.9でした。
以上
