24408


jquery mobileを用いてサイドメニューを作りました。  
デフォルトのサイドメニューの幅が狭かったので".ui-panel{width:50%;}"を指定する事で、  
サイドメニュー及び内部のボタンの幅を広げました。  
しかし、ボタンの押下できる範囲は広がっておらず、デフォルトの幅を超えるとマウスオーバーしても反応がありません。ボタンを押してもサイドメニューの範囲外を押されたと認識されてしまったのかサイドメニューが閉じてしまいます。  
どのように対応すればサイドメニュー幅と内部コンテツの同期がとれるのでしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/a3tYs.png)](https://i.stack.imgur.com/a3tYs.png)

[code]

    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    <html>
     <head> 
      <meta charset="utf-8">
      <title>sample</title>
     </head>
     <body>
      <div data-role="page">
       <div data-role="header">
        <a href="#menu-left" data-role="button" data-icon="bars" >サイドメニュー</a>
       </div>                    
       
       <div data-role="panel" id="menu-left" data-display="overlay">
          <ul data-role="listview">
            <li><a href="#anchor1">anchor1</a></li>
            <li><a href="#anchor2">anchor2</a></li>
            <li><a href="#anchor3">anchor3</a></li>
          </ul>
       </div>
      </div>
      
      <style>
       .ui-panel{width:50%;}
      </style>
      
     </body>
    </html>
[/code]


CC BY-SA 3.0
2016-04-28T02:34:51.607
24405
2019-09-09T12:58:09.263
2019-09-09T12:58:09.263
32986
12753
question
jquery-mobile
サイドメニューの幅を広げても、ボタンの押下範囲の幅が変化しません。


メニューを開くと、右にこういった要素が生成されていますね。

[code]

    <div style="height: 300px;" class="ui-panel-dismiss ui-panel-dismiss-position-left ui-panel-dismiss-display-overlay ui-panel-dismiss-open"></div>
    
[/code]

メニューの外をクリックした時に、そのイベントを受けてメニューを閉じるための物でしょう。  
これの位置は`left`でメニューの幅をハードコーディングする事で設定してあるようです。

あちらこちらに数値がハードコーディングされていると修正はとても面倒ですが、とりあえずはこのように上書きすればよいです。

[code]

    .ui-panel-dismiss-open.ui-panel-dismiss-position-left {
        left: 50%;
    }
    
[/code]

[code]

    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    <html>
     <head> 
      <meta charset="utf-8">
      <title>sample</title>
     </head>
     <body>
      <div data-role="page">
       <div data-role="header">
        <a href="#menu-left" data-role="button" data-icon="bars" >サイドメニュー</a>
       </div>                    
       
       <div data-role="panel" id="menu-left" data-display="overlay">
          <ul data-role="listview">
            <li><a href="#anchor1">anchor1</a></li>
            <li><a href="#anchor2">anchor2</a></li>
            <li><a href="#anchor3">anchor3</a></li>
          </ul>
       </div>
      </div>
      
      <style>
    .ui-panel{width:50%;}
    .ui-panel-dismiss-open.ui-panel-dismiss-position-left {
        left: 50%;
    }
      </style>
      
     </body>
    </html>
[/code]


CC BY-SA 3.0
2016-04-28T03:15:33.327
24408
2016-04-28T03:15:33.327
3054
24405
answer