VWSとは フォーラム Lightning Contact Form7のファイルタグにスマホ用のCSSが当たらないためレイアウトが崩れる

このトピックには6件の返信が含まれ、2人の参加者がいます。3 週間、 1 日前 webLinx さんが最後の更新を行いました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #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>

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

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

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

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

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

    #13338

    Vektor,Inc
    キーマスター

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

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

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

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

    #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;}

    などで解消されますか?

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)

このトピックに返信するにはログインが必要です。