[ 解決済 ] プラグイン Booking Package の入力欄の表示を調整する方法について

[祐介高嶋]

■ WordPress のバージョン
6.7.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.23.7

■ スキンの種類
Origin II

■ 期待する動作
①項目名と入力欄を縦積みにしたい。
②入力欄を横幅いっぱいに広げたい。
③クレジットカードの入力欄を横幅いっぱいに広げたい（正常に表示させたい）。

■ 自分で試した事
おおむねすべてのプラグインを停止した上で、表示の確認をしました。
→変化はなく、表示は乱れたままでした。

外観＞追加 CSS に設定している追加CSSをすべて削除した上で、表示の確認をしました。
→変化はなく、表示は乱れたままでした。

子テーマではなく親テーマに変更し、表示の確認をしました。
→変化はなく、表示は乱れたままでした。

新たにwordpressやlinghtningproをインストールした上で、表示の確認をしました。
→表示は乱れたままでした。

テーマをSydney（バージョン: 2.49）に変更した上で、表示の確認をしました。
→すべての問題が解決します。

テーマをTwenty Twenty（バージョン: 2.8）に変更した上で、表示の確認をしました。
→すべての問題が解決します。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
①項目名と入力欄を縦積みにしたい。
→他のテーマと異なり、項目名と入力欄が横積みになります。

②入力欄を横幅いっぱいに広げたい。
→他のテーマと異なり、入力欄が狭い（または項目によってまちまち）です。

③クレジットカードの入力欄を正常に表示させたい。
→他のテーマと異なり、入力欄が1文字分くらいしか表示されず、決済に進めません。

■ その他特記事項
◎他のテーマでは問題が生じませんでしたので、lightningpro固有の症状かと思います。

◎同様の問題（クレジットカードの入力枠が1文字分しか表示されない）がbookingpackageのサポートに質問されています。
https://wordpress.org/support/topic/%E3%82%AF%E3%83%AC%E3%82%B8%E3%83%83%E3%83%88%E3%82%AB%E3%83%BC%E3%83%89%E7%95%AA%E5%8F%B7%E3%81%8C%E5%85%A5%E5%8A%9B%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84/
→サポートからはbokkingpackage側の問題ではないという回答でした。

◎添付ファイルについて
・他のテーマで表示させたページ（縦積み、入力欄が横幅いっぱい）
・lingtingproで表示させたページ（横積み、入力欄が狭い）
・lingtingproで表示させたページ（クレジットカードの入力欄が1文字程度しかない）

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。

数万あるすべてのプラグインに対応するのは現状の価格では対応できないため、恐れ入りますが他の開発者様のプラグインについては動作・表示保証対象外とさせていただいております。

症状を確認できるサイトデータ（ all in one wp migration などでエクスポートしたもの ）かデモ環境のURLなど提供いただけると確認がしやすいです。

よろしくお願いいたします。

[石川＠Vektor,Inc.]

Booking Package はインストールはしてみましたが、使い方を調べていろいろ設定しないと問題のページにたどり着けないようなので、該当サイトのログイン情報を下記よりご連絡いただければ確認させていただきます。

フォーラムからの誘導専用のお問い合わせ

よろしくお願いいたします。

[石川＠Vektor,Inc.]

確認したところ Booking Package がフォームの部分に .row や .form-row という Bootstrap で使われているクラス名を使用しているために、Bootstrap を読み込んでいる Lightning Pro では影響を受けるという状態でした。

Lightning Pro 8.23.8 にて対応しましたのでアップデートの上ご確認ください。

内容的には

:where( #booking-package_inputFormPanel ) .row {
display: block;
}

:where( #booking-package_inputFormPanel ) .form-row {
display: block;
}

の追加のみです。

[祐介高嶋]

他社製プラグインについては動作・表示保証対象外とのことでしたが、
ご確認ご対応いただき誠にありがとうございます。

完全に希望通りの表示となりました。
感謝申し上げます。

[投稿者]

投稿