サイドメニューの幅を広げても、ボタンの押下範囲の幅が変化しません。

投稿者: Anonymous

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

画像の説明をここに入力

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

解決

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

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

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

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

.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
    left: 50%;
}

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *