[ 解決済 ] モバイル表示時のメニュー数について

VWSとは フォーラム バグ報告と提案 [ 解決済 ] モバイル表示時のメニュー数について

[ 解決済 ] モバイル表示時のメニュー数について

  • このトピックには7件の返信、3人の参加者があり、最後にVektor,Incにより3週、 6日前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #52002

    mii
    参加者

    ■ 利用テーマとバージョン :
    lightning pro 8.9.9

    ■ 質問内容:
    不具合なのか仕様なのかわかりませんが、
    モバイル上でメニューを表示したときに、
    メニューの個数が19個以上ある場合、18個目までしか表示されません。
    (PC版ではすべて表示されます)

    この数を増やすことはできないでしょうか?
    よろしくお願いいたします。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #52003

    Vektor,Inc
    キーマスター

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

    ぱっと見どこの事かわからなかったのですが、
    どのメニュー項目でしょうか?

    また、確認しているモバイル端末は何でしょうか?

    #52005

    mii
    参加者

    早速の返信ありがとうございます。

    確認しているモバイル端末はiPhone6Sで、ブラウザはSafariです。

    該当箇所は、左下の「MENU」をタップ→「会社について」をタップした先です。
    (※説明が不足しておりすみません)

    添付画像のように、19個目、20個目のメニューが表示されません。

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

    Attachments:
    You must be logged in to view attached files.
    #52028

    対馬 俊彦
    参加者

    横からすみません。

    以下の CSS を追加すればとりあえず表示が欠けないようになります。

    .vk-menu-acc ul.acc-child-open {
      max-height: 1200px;
    }

    Lightning では 1200px のところが 1000px になっていて、
    20個の項目を表示するには足らないのですが、20個は多過ぎると思います。

    モバイル端末であればスクロールして最後まで表示することが可能ですが、
    ノートパソコンではスクロールしても下の項目を表示できません。

    低価格のノートパソコンでよく使われている 1366 x 768 ピクセルの画面だと、
    「ボード重量計算シート」の先を見ることができません。

    ご参考まで。

    #52044

    Vektor,Inc
    キーマスター

    対馬さんありがとうございます。石川でございます。

    本件テーマ側で調整しておいた方が良い項目ですので近日対応させていただきますが、少しお時間いただきたく思いますので、お急ぎの場合は 対馬さんがご提案してくださっているコードか以下を 外観 > カスタマイズ > 追加CSS などに貼り付けてください。

    .vk-menu-acc ul.acc-child-open,
    .device-pc .gMenu>li:hover>.sub-menu {
    	max-height: 80vh;
    	overflow-y: scroll;
    }

    ただ、対馬様もコメントしてくださっているように項目が多いので、メニュー項目の階層を見直す事も同時にお勧めいたします。

    ご迷惑おかけして恐れ入りますがよろしくお願いいたします。

    #52057

    mii
    参加者

    対馬俊彦様、株式会社ベクトル石川様

    回答頂きありがとうございました。

    CSSコードで対応いたします。
    また、確かに現状メニューが多すぎるので、
    今後階層構造の見直しをしていこうと思います。

    どうもありがとうございました。

    #52058

    対馬 俊彦
    参加者

    石川さんが提示された CSS にコメントするのはドキドキしますが…

    Windows のブラウザは overflow-y: scroll; にすると、
    スクロールの必要がないときでも添付画像 (Chrome の例) のように
    スクロールバーを表示してしまいます。

    overflow-y: auto; の方がよいのではないかと思います。

    Attachments:
    You must be logged in to view attached files.
    #52062

    Vektor,Inc
    キーマスター

    Windows のブラウザは overflow-y: scroll; にすると、
    スクロールの必要がないときでも添付画像 (Chrome の例) のように
    スクロールバーを表示してしまいます。

    そうそう、僕も確か Windows だと確か不必要に出ちゃう気もしてました…。
    ありがとうございます!!

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。