Skip to content

Commit ad9b184

Browse files
busterbeansbusterbeans
committed
Changing positioning of menu and adding a note
1 parent 7ed4c34 commit ad9b184

File tree

8 files changed

+33
-27
lines changed

8 files changed

+33
-27
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ var app = angular.module('menu-demo', ['ngRoute', 'ng-context-menu'])
2626
</div>
2727
```
2828

29+
**Note:** The position of the dropdown menu can get a little out of whack if you place the dropdown
30+
menu in a container with padding/margin/etc so it's best to place it as a direct child of the body element as is
31+
shown in this example.
2932

3033
That's it, I hope you find this useful!
3134

‎assets/template/home.html

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,6 @@
44
Right-click anywhere within this panel
55
</div>
66
</div>
7-
<div class="dropdown" id="myMenu">
8-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
9-
<li role="presentation">
10-
<a class="pointer" role="menuitem" tabindex="-1" ng-click="highlight = true">Select</a>
11-
</li>
12-
<li role="presentation">
13-
<a class="pointer" role="menuitem" tabindex="-1" ng-click="highlight = false">Deselect</a>
14-
</li>
15-
<li role="presentation">
16-
<a class="pointer" role="menuitem" tabindex="-1" ng-click="expanded = true">Expand</a>
17-
</li>
18-
<li role="presentation">
19-
<a class="pointer" role="menuitem" tabindex="-1" ng-click="expanded = false">Contract</a>
20-
</li>
21-
<li role="presentation">
22-
<a href="https://github.com/ianwalter/ng-context-menu" role="menuitem" tabindex="-1">ng-context-menu on GitHub</a>
23-
</li>
24-
</ul>
25-
</div>
7+
<strong>Note:</strong> The position of the dropdown menu can get a little out of whack if you place the dropdown
8+
menu in a container with padding/margin/etc so it's best to place it as a direct child of the body element as is
9+
shown in this example.

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-context-menu",
3-
"version": "0.0.5",
3+
"version": "0.0.6",
44
"description": "An AngularJS directive to display a context menu when a right-click event is triggered",
55
"keywords": [
66
"ng-context-menu",

‎dist/ng-context-menu.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ angular
1515
menuElement = angular.element(document.getElementById(attrs.target)),
1616
open = function open(event, element) {
1717
element.addClass('open');
18-
element.css('top', event.layerY + 'px');
19-
element.css('left', event.layerX + 'px');
18+
element.css('top', event.pageY + 'px');
19+
element.css('left', event.pageX + 'px');
2020
opened = true;
2121
},
2222
close = function close(element) {

‎dist/ng-context-menu.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<title>ng-context-menu</title>
1212

13-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
13+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
1414
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js" data-main="assets/js/app.js"></script>
1515

1616
<style>
@@ -52,5 +52,24 @@ <h4>
5252
</p>
5353
<br>
5454
</div>
55+
<div class="dropdown" id="myMenu">
56+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
57+
<li role="presentation">
58+
<a class="pointer" role="menuitem" tabindex="-1" ng-click="highlight = true">Select</a>
59+
</li>
60+
<li role="presentation">
61+
<a class="pointer" role="menuitem" tabindex="-1" ng-click="highlight = false">Deselect</a>
62+
</li>
63+
<li role="presentation">
64+
<a class="pointer" role="menuitem" tabindex="-1" ng-click="expanded = true">Expand</a>
65+
</li>
66+
<li role="presentation">
67+
<a class="pointer" role="menuitem" tabindex="-1" ng-click="expanded = false">Contract</a>
68+
</li>
69+
<li role="presentation">
70+
<a href="https://github.com/ianwalter/ng-context-menu" role="menuitem" tabindex="-1">ng-context-menu on GitHub</a>
71+
</li>
72+
</ul>
73+
</div>
5574
</body>
5675
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-context-menu",
3-
"version": "0.0.5",
3+
"version": "0.0.6",
44
"description": "An AngularJS directive to display a context menu when a right-click event is triggered",
55
"main": "dist/ng-context-menu.min.js",
66
"devDependencies": {

‎src/ng-context-menu.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ angular
1515
menuElement = angular.element(document.getElementById(attrs.target)),
1616
open = function open(event, element) {
1717
element.addClass('open');
18-
element.css('top', event.layerY + 'px');
19-
element.css('left', event.layerX + 'px');
18+
element.css('top', event.pageY + 'px');
19+
element.css('left', event.pageX + 'px');
2020
opened = true;
2121
},
2222
close = function close(element) {

0 commit comments

Comments
 (0)