「WCEX Widget Cart」とスタイルシート「display:sticky;」を併用したい」
- このトピックには4件の返信、1人の参加者があり、最後に
により6年、 11ヶ月前に更新されました。
-
投稿
-
お世話になります。
昨日拡張プラグインの「WCEX Widget Cart」を購入し作成中のサイトに組み込んでみましたところ、スマートフォンで確認してすると幅が通常の倍で表示され右半分が真っ白の状態でした。色々と調べてみたところ、当方作成のサイトで「display:sticky;」を適用したく、「overflow: visible;」が適用されていないと「display:sticky;」が動作しないため、いろんな場所に「overflow: visible;」を書いて試してみたのですが、body直下に書くことで動くことがわかり、そこに書いております。
原因は、曖昧なのですが「WCEX Widget Cart」のポプアップで出てくる部分が「overflow: visible;」で表示される為にスマートフォンではその部分が表示されてしまうためそのような事になってしまうのかと考えます。
（パソコンでは問題ありません）諦めて「WCEX Widget Cart」を使わない方法も有るのですが、使わない場合は商品ページなどのポップアップ画像を消す時の「×」ボタンを押すとオーバーレイ下部のカートボタンまでが反応してしまい、意図せずカートページへ移ってしまいます。
「display:sticky;」を使わなければ良いのですが、こちらとしては残したい重要な場所になるためにぜひとも使いたいのです。
そうなると「WCEX Widget Cart」を使うにしろ使わないにしろ何らかの問題が発生してしまい困っております。何かアドバイスを頂けませんでしょうか？
宜しくお願いたしますWordPress のバージョン：（例 4.9.1）
Welcart のバージョン：（例 1.9.6）
Welcart専用の拡張プラグイン：（例 WCEX SKU Select、価格変動拡張プラグイン Multi Price、WCEX Widget Cart）
ご利用のテーマ：（VOLL）
症状を確認したブラウザ：クローム（Andoroid7.0）
サーバー：さくらインターネットスタンダードプラン
SSLの利用：常時SSL
WordPress のパーマリンク設定：/%postname%/お世話になります。
昨日拡張プラグインの「WCEX Widget Cart」を購入し作成中のサイトに組み込んでみましたところ、スマートフォンで確認してすると幅が通常の倍で表示され右半分が真っ白の状態でした。色々と調べてみたところ、当方作成のサイトで「position:sticky;」を適用したく、「overflow: visible;」が適用されていないと「position:sticky;」が動作しないため、いろんな場所に「overflow: visible;」を書いて試してみたのですが、body直下に書くことで動くことがわかり、そこに書いております。
原因は、曖昧なのですが「WCEX Widget Cart」のポプアップで出てくる部分が「overflow: visible;」で表示される為にスマートフォンではその部分が表示されてしまうためそのような事になってしまうのかと考えます。
（パソコンでは問題ありません）諦めて「WCEX Widget Cart」を使わない方法も有るのですが、使わない場合は商品ページなどのポップアップ画像を消す時の「×」ボタンを押すとオーバーレイ下部のカートボタンまでが反応してしまい、意図せずカートページへ移ってしまいます。
「display:sticky;」を使わなければ良いのですが、こちらとしては残したい重要な場所になるためにぜひとも使いたいのです。
そうなると「WCEX Widget Cart」を使うにしろ使わないにしろ何らかの問題が発生してしまい困っております。何かアドバイスを頂けませんでしょうか？
宜しくお願いたしますWordPress のバージョン：（例 4.9.1）
Welcart のバージョン：（例 1.9.6）
Welcart専用の拡張プラグイン：（例 WCEX SKU Select、価格変動拡張プラグイン Multi Price、WCEX Widget Cart）
ご利用のテーマ：（VOLL）
症状を確認したブラウザ：クローム（Andoroid7.0）
サーバー：さくらインターネットスタンダードプラン
SSLの利用：常時SSL
WordPress のパーマリンク設定：/%postname%/お世話になります。
昨日拡張プラグインの「WCEX Widget Cart」を購入し作成中のサイトに組み込んでみましたところ、スマートフォンで確認してすると幅が通常の倍で表示され右半分が真っ白の状態でした。色々と調べてみたところ、当方作成のサイトで「position:sticky;」を適用したく、「overflow: visible;」が適用されていないと「position:sticky;」が動作しないため、いろんな場所に「overflow: visible;」を書いて試してみたのですが、body直下に書くことで動くことがわかり、そこに書いております。
原因は、曖昧なのですが「WCEX Widget Cart」のポプアップで出てくる部分が「overflow: visible;」で表示される為にスマートフォンではその部分が表示されてしまうためそのような事になってしまうのかと考えます。
（パソコンでは問題ありません）諦めて「WCEX Widget Cart」を使わない方法も有るのですが、使わない場合は商品ページなどのポップアップ画像を消す時の「×」ボタンを押すとオーバーレイ下部のカートボタンまでが反応してしまい、意図せずカートページへ移ってしまいます。
「position:sticky;」を使わなければ良いのですが、こちらとしては残したい重要な場所になるためにぜひとも使いたいのです。
そうなると「WCEX Widget Cart」を使うにしろ使わないにしろ何らかの問題が発生してしまい困っております。何かアドバイスを頂けませんでしょうか？
宜しくお願いたしますWordPress のバージョン：（例 4.9.1）
Welcart のバージョン：（例 1.9.6）
Welcart専用の拡張プラグイン：（例 WCEX SKU Select、価格変動拡張プラグイン Multi Price、WCEX Widget Cart）
ご利用のテーマ：（VOLL）
症状を確認したブラウザ：クローム（Andoroid7.0）
サーバー：さくらインターネットスタンダードプラン
SSLの利用：常時SSL
WordPress のパーマリンク設定：/%postname%/お世話になります。
昨日から題名やら内容訂正でこちらの板を汚したことお詫びいたします。
表題の件、とりあえず自己解決しましたのでご報告を
モバイルでの右側空白ですが、
.view-cart-wrap
right: -100%;
を
right: 0;に上書きすることで画面いっぱいに表示することが出来ました。
ただ、カートボタンを押した時に右からスライドするのでは無く、フェードインする形になりました。今のところアンドロイドのみでの検証です。
後ほどiOSでも検証してみます。うまくいかない場合は、恐れ入りますが何かアドバイスを頂けましたら幸いです。
どうそ宜しくお願いいたします。ありがとうございました。
- このトピックに返信するにはログインが必要です。
PAGE TOP