Q&A
ご返答有難うございます。drawer-docs.css と drawer.min.css とは同じ内容なのでしょうか？？drawer-docs.css というのがどこにも見当たらず困っています。宜しくお願いいたします。
jquery のプラグインで「drawer」で縦スクロールを設定したいのですが、
リファレンスを見てもそのような設定が無く、困っています。
https://blog.mismithportfolio.com/web/20150320drawer
http://on-ze.com/archives/5429
を参考にしているんですが、
項目が多い時に縦スクロールが出てほしいのですが、
出てくれません。
ご存知の方いらっしゃいましたら教えてください。
宜しくお願いいたします。
<script language="javascript" src="/js/jquery-2.1.4.min.js" type="text/javascript"></script> <link rel="stylesheet" href="/css/drawer.min.css"> <script src="/js/drawer.min.js"></script> <script src="/js/iscroll.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $('.drawer').drawer(); }); //--> </script>
アクションで表示する内容（一部しか表示されない）
<nav class="drawer-nav" role="navigation"> <p class="text-center">Select Member</p> <form id="member-select-form"> <div class="checkbox"> <input type="checkbox" name="cb-member" id="dw_member1" class="dw_member" value="001" /> <label for="dw_member1" class="cb-member"><span id="member_name1">てすと１</span></label> <input type="checkbox" name="cb-member" id="dw_member2" class="dw_member" value="003" /> <label for="dw_member2" class="cb-member"><span id="member_name2">てすと３</span></label> <input type="checkbox" name="cb-member" id="dw_member3" class="dw_member" value="007" /> <label for="dw_member3" class="cb-member"><span id="member_name3">てすと４</span></label> <input type="checkbox" name="cb-member" id="dw_member4" class="dw_member" value="008" /> <label for="dw_member4" class="cb-member"><span id="member_name4">てすと５</span></label> <input type="checkbox" name="cb-member" id="dw_member5" class="dw_member" value="010" /> <label for="dw_member5" class="cb-member"><span id="member_name5">てすと７</span></label> <input type="checkbox" name="cb-member" id="dw_member6" class="dw_member" value="011" /> <label for="dw_member6" class="cb-member"><span id="member_name6">てすと８</span></label> <input type="checkbox" name="cb-member" id="dw_member7" class="dw_member" value="012" /> <label for="dw_member7" class="cb-member"><span id="member_name7">てすと９</span></label> <input type="checkbox" name="cb-member" id="dw_member8" class="dw_member" value="015" /> <label for="dw_member8" class="cb-member"><span id="member_name8">てすと１１</span></label> <input type="checkbox" name="cb-member" id="dw_member9" class="dw_member" value="016" /> <label for="dw_member9" class="cb-member"><span id="member_name9">てすと１２</span></label> <input type="checkbox" name="cb-member" id="dw_member10" class="dw_member" value="020" /> <label for="dw_member10" class="cb-member"><span id="member_name10">てすと１３</span></label> <input type="checkbox" name="cb-member" id="dw_member11" class="dw_member" value="025" /> <label for="dw_member11" class="cb-member"><span id="member_name11">てすと１４</span></label> <input type="checkbox" name="cb-member" id="dw_member12" class="dw_member" value="030" /> <label for="dw_member12" class="cb-member"><span id="member_name12">てすと１５</span></label> <input type="checkbox" name="cb-member" id="dw_member13" class="dw_member" value="035" /> <label for="dw_member13" class="cb-member"><span id="member_name13">てすと１６</span></label> <input type="checkbox" name="cb-member" id="dw_member14" class="dw_member" value="045" /> <label for="dw_member14" class="cb-member"><span id="member_name14">てすと１８</span></label> <input type="checkbox" name="cb-member" id="dw_member15" class="dw_member" value="050" /> <label for="dw_member15" class="cb-member"><span id="member_name15">てすと１９</span></label> <input type="checkbox" name="cb-member" id="dw_member16" class="dw_member" value="060" /> <label for="dw_member16" class="cb-member"><span id="member_name16">てすと２１</span></label> <input type="checkbox" name="cb-member" id="dw_member17" class="dw_member" value="065" /> <label for="dw_member17" class="cb-member"><span id="member_name17">てすと２２</span></label> <input type="checkbox" name="cb-member" id="dw_member18" class="dw_member" value="070" /> <label for="dw_member18" class="cb-member"><span id="member_name18">てすと２３</span></label> <input type="checkbox" name="cb-member" id="dw_member19" class="dw_member" value="080" /> <label for="dw_member19" class="cb-member"><span id="member_name19">てすと２５</span></label> <input type="checkbox" name="cb-member" id="dw_member20" class="dw_member" value="085" /> <label for="dw_member20" class="cb-member"><span id="member_name20">てすと２６</span></label> <input type="checkbox" name="cb-member" id="dw_member21" class="dw_member" value="090" /> <label for="dw_member21" class="cb-member"><span id="member_name21">てすと２７</span></label> <input type="checkbox" name="cb-member" id="dw_member22" class="dw_member" value="095" /> <label for="dw_member22" class="cb-member"><span id="member_name22">てすと２９</span></label> <input type="checkbox" name="cb-member" id="dw_member23" class="dw_member" value="096" /> <label for="dw_member23" class="cb-member"><span id="member_name23">てすと３０</span></label> <input type="checkbox" name="cb-member" id="dw_member24" class="dw_member" value="105" /> <label for="dw_member24" class="cb-member"><span id="member_name24">てすと３２</span></label> <input type="checkbox" name="cb-member" id="dw_member25" class="dw_member" value="106" /> <label for="dw_member25" class="cb-member"><span id="member_name25">てすと３３</span></label> <input type="checkbox" name="cb-member" id="dw_member26" class="dw_member" value="107" /> <label for="dw_member26" class="cb-member"><span id="member_name26">てすと３４</span></label> <input type="checkbox" name="cb-member" id="dw_member27" class="dw_member" value="110" /> <label for="dw_member27" class="cb-member"><span id="member_name27">てすと３５</span></label> <input type="checkbox" name="cb-member" id="dw_member28" class="dw_member" value="112" /> <label for="dw_member28" class="cb-member"><span id="member_name28">てすと３６</span></label> <input type="checkbox" name="cb-member" id="dw_member29" class="dw_member" value="115" /> <label for="dw_member29" class="cb-member"><span id="member_name29">てすと３９</span></label> <input type="checkbox" name="cb-member" id="dw_member30" class="dw_member" value="121" /> <label for="dw_member30" class="cb-member"><span id="member_name30">てすと４１</span></label> <input type="checkbox" name="cb-member" id="dw_member31" class="dw_member" value="125" /> <label for="dw_member31" class="cb-member"><span id="member_name31">てすと４２</span></label> <input type="checkbox" name="cb-member" id="dw_member32" class="dw_member" value="130" /> <label for="dw_member32" class="cb-member"><span id="member_name32">てすと４３</span></label> <input type="checkbox" name="cb-member" id="dw_member33" class="dw_member" value="135" /> <label for="dw_member33" class="cb-member"><span id="member_name33">てすと４４</span></label> <input type="checkbox" name="cb-member" id="dw_member34" class="dw_member" value="136" /> <label for="dw_member34" class="cb-member"><span id="member_name34">てすと４５</span></label> <input type="checkbox" name="cb-member" id="dw_member35" class="dw_member" value="140" /> <label for="dw_member35" class="cb-member"><span id="member_name35">てすと４７</span></label> <input type="checkbox" name="cb-member" id="dw_member36" class="dw_member" value="142" /> <label for="dw_member36" class="cb-member"><span id="member_name36">てすと４９</span></label> <input type="checkbox" name="cb-member" id="dw_member37" class="dw_member" value="145" /> <label for="dw_member37" class="cb-member"><span id="member_name37">てすと５０</span></label> <input type="checkbox" name="cb-member" id="dw_member38" class="dw_member" value="150" /> <label for="dw_member38" class="cb-member"><span id="member_name38">てすと５１</span></label> <input type="checkbox" name="cb-member" id="dw_member39" class="dw_member" value="160" /> <label for="dw_member39" class="cb-member"><span id="member_name39">てすと５３</span></label> </div> </form> </nav>
駆動するボタン
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 pull-right"> <p><img src="/images/icon-member-select.png" width="70" class="drawer-toggle" /><br>Select Members</p> </div>
回答2件
0
ウインドウの高さを低くした状態で公式サイトのハンバーガーメニューを開くと、期待通りに縦スクロールできているようです。
Re: hidepon さん
投稿2017/06/07 03:20
総合スコア18162
0
ベストアンサー
drawer-docs.css を見ると、.drawer-nav に overflow: hidden; が書かれているようですが、
overflow: auto; にしたらいいのではないでしょうか？
投稿2017/06/07 04:23
総合スコア13749
ミニファイ(余計な空白などを除去して小さくしたもの)だと思います。
ファイル名はあまり重要ではなくて、いま<nav class="drawer-nav">と書くとプラグインが用意したスタイルによってスクロールバーがなくなってしまうんですね。
なので、これを上書きすればいいのではないかと……
.drawer-nav { overflow: auto; }
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
ご返答有難うございます。なるほどです。うまくいきました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/07 04:09