Contact Form7のファイルタグにスマホ用のCSSが当たらないためレイアウトが崩れる

[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>

その他のタグについてはすべて試してみましたが、
レイアウト崩れは発生していませんでした。

[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>

https://getbootstrap.com/docs/3.3/css/#tables

[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>

ほかになにか原因がありますでしょうか。

[Vektor,Inc]

“レイアウトが崩れる”というのがどういう状態を指すかにもよりますが、
BizVektorのclassはthもtdも行にしてしまう指定ですが、
bootstrapの table-responsive は、画面が狭い時にテーブルを横にスライドする事が出来るようにするためのclassです。

画面が狭い時にテーブルを横にスライドする事はできますか？

[webLinx]

以下のURLのページをスマホにてご確認ください。
※PC表示ではレイアウト崩れはおきません。

http://weblinx01.xsrv.jp/dev_andoh-mitsuki.com/%E3%81%8A%E5%95%8F%E5%90%88%E3%81%9B%E3%83%BB%E3%81%94%E6%B3%A8%E6%96%87/

一つ目のテーブル内にはファイルタグがありますが、
二つ目のテーブルにはファイルタグがありません。

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>

>>画面が狭い時にテーブルを横にスライドする事はできますか？
テーブルを横にスライドするようには見えないです。

[Vektor,Inc]

class=”table-responsive” をtableタグにではなく、tableの外側のdivに<div class="table-responsive"> と書くと横スライドになります。
（tableタグからは table-responsive ） は削除してください。

『レイアウト崩れ』とはどういう状態を指していますか？

table {font-size:12px;}
input[type=file] {width:300px;}

などで解消されますか？

[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;}を記述する必要がある

[投稿者]

投稿