Contact Form7のファイルタグにスマホ用のCSSが当たらないためレイアウトが崩れる
Contact Form7のファイルタグにスマホ用のCSSが当たらないためレイアウトが崩れる
タグ: Contact Form7, レイアウト崩れ
-
投稿者投稿
-
2018年10月19日 12:37 PM #13295
webLinx参加者お世話になっております。
wordpress公式フォーラムへの書き込みなのか判断がつかなかったのですが、
BizVektorでは発生せず、Lightningで発生するので、こちらに書き込ませていただきました。以下は使用しているテーマ、プラグインです。
正常
BizVektor 1.11.5
BizVektor Cuddly 1.0.2
Contact Form 7 5.0.4異常
Lightning Pro 0.2.3
Contact Form 7 5.0.4以下のソースの【[file file-01]】の箇所でスマホ表示している場合に、
widthが300を超えたinputタグとなるため、テーブル全体のレイアウトが崩れています。<table> <tbody> <tr> <th>お名前</th> <td>[text* your-name placeholder "お名前を入力してください"]</td> </tr> <tr> <th>写真</th> <td>[file file-01]</td> </tr> </tbody> </table>
その他のタグについてはすべて試してみましたが、
レイアウト崩れは発生していませんでした。2018年10月22日 11:58 AM #13331
Vektor,IncキーマスターLightningはBootstrapをベースとしていますので、下記のようにマークアップするとレスポンシブ対応となります。
<div class="table-responsive"> <table class="table"> <tbody> <tr> <th>お名前</th> <td>[text* your-name placeholder "お名前を入力してください"]</td> </tr> <tr> <th>写真</th> <td>[file file-01]</td> </tr> </tbody> </table> </div>
2018年10月22日 12:38 PM #13336
webLinx参加者ご連絡ありがとうございます。
以下のコードを記述してみましたが、スマホ用のCSSはやはり当たっておらず、
レイアウトが崩れております。<div class="table-responsive"> <table class="table table-striped table-bordered"> <tbody> <tr> <th>写真1</th> <td>[file file-01]</td> </tr> </tbody> </table> </div>
ほかになにか原因がありますでしょうか。
2018年10月22日 1:06 PM #13338
Vektor,Incキーマスター“レイアウトが崩れる”というのがどういう状態を指すかにもよりますが、
BizVektorのclassはthもtdも行にしてしまう指定ですが、
bootstrapの table-responsive は、画面が狭い時にテーブルを横にスライドする事が出来るようにするためのclassです。画面が狭い時にテーブルを横にスライドする事はできますか?
2018年10月22日 1:29 PM #13339
webLinx参加者以下のURLのページをスマホにてご確認ください。
※PC表示ではレイアウト崩れはおきません。一つ目のテーブル内にはファイルタグがありますが、
二つ目のテーブルにはファイルタグがありません。Contact Form7のコードは以下の内容です。
<h2>ファイルタグあり</h2> <table class="table table-responsive table-striped table-bordered mobile-block"> <tbody> <tr> <th>お名前</th> <td>[text* your-name placeholder "お名前を入力してください"]</td> </tr> <tr> <th>メールアドレス</th> <td>[email* your-mail placeholder "メールアドレスを入力してください"]</td> </tr> <tr> <th>電話番号</th> <td>[tel* tel placeholder "電話番号を入力してください"]</td> </tr> <tr> <th>郵便番号</th> <td>[text zip class:p-postal-code minlength:8 size:8 placeholder "郵便番号を入力して下さい"]</td> </tr> <tr> <th>住所</th> <td>[text address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所を入力して下さい"]</td> </tr> <tr> <th>写真1</th> <td>[file file-01]</td> </tr> <tr> <th>写真2</th> <td>[file file-02]</td> </tr> <tr> <th>写真3</th> <td>[file file-03]</td> </tr> <tr> <th>お問い合わせ内容</th> <td>[textarea your-message placeholder "お問い合わせ内容を入力してください"]</td> </tr> </tbody> </table> <h2>ファイルタグなし</h2> <table class="table table-responsive table-striped table-bordered mobile-block"> <tbody> <tr> <th>お名前</th> <td>[text* your-name placeholder "お名前を入力してください"]</td> </tr> <tr> <th>メールアドレス</th> <td>[email* your-mail placeholder "メールアドレスを入力してください"]</td> </tr> <tr> <th>電話番号</th> <td>[tel* tel placeholder "電話番号を入力してください"]</td> </tr> <tr> <th>郵便番号</th> <td>[text zip class:p-postal-code minlength:8 size:8 placeholder "郵便番号を入力して下さい"]</td> </tr> <tr> <th>住所</th> <td>[text address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所を入力して下さい"]</td> </tr> <tr> <th>お問い合わせ内容</th> <td>[textarea your-message placeholder "お問い合わせ内容を入力してください"]</td> </tr> </tbody> </table>
>>画面が狭い時にテーブルを横にスライドする事はできますか?
テーブルを横にスライドするようには見えないです。2018年10月23日 12:23 AM #13351
Vektor,Incキーマスターclass=”table-responsive” をtableタグにではなく、tableの外側のdivに
<div class="table-responsive">
と書くと横スライドになります。
(tableタグからは table-responsive ) は削除してください。『レイアウト崩れ』とはどういう状態を指していますか?
table {font-size:12px;}
input[type=file] {width:300px;}などで解消されますか?
2018年10月23日 7:24 AM #13355
webLinx参加者>>class=”table-responsive” をtableタグにではなく、tableの外側のdivに<div class=”table-responsive”> と書くと>>横スライドになります。
>>(tableタグからは table-responsive ) は削除してください。
★スマホ表示の際に横スライドは求めていないため、table-responsiveは削除します。
>>『レイアウト崩れ』とはどういう状態を指していますか?
★スマホ表示した場合にtype=fileのinputタグがテーブルタグの枠をはみ出します。
type=fileのinputタグがテーブルタグの枠をはみ出したせいなのか、
その他のinputタグもテーブルタグの枠をはみ出します。>>table {font-size:12px;}
>>input[type=file] {width:300px;}
★input[type=file] {width:300px;}を使用しても変化はありませんでした。
table {font-size:12px;}を使用したところ、BizVektorでtype=fileのinputタグを使用した際の表示と同じになりました。■結果
BizVektorの場合
スマホ表示した場合、ContactForm7のinputタグのtype=fileのフォントサイズは12pxとなり、テーブルタグの枠をはみ出さないLightningの場合
スマホ表示した場合、ContactForm7のinputタグのtype=fileのフォントサイズは16pxとなり、テーブルタグの枠をはみ出すため、table {font-size:12px;}を記述する必要がある -
投稿者投稿
- このトピックに返信するにはログインが必要です。
- トピックタグ
- Contact Form7、レイアウト崩れ