CODEWITHSUNDEEP
polymervaadinweb-componentpolymer-2.xvaadin-core-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16122

How to get the vaadin-context-menu demo to work?

Here is the vaadin-context-menu documentation page.

On that page, there is a button labeled TRY IT OUT that links to a demo page here.

My problem is that I can't get the demo page to actually do anything. I see no errors in the console.

Is the problem on my end? Or is there something wrong with the demo? If it's the latter, how can I fix the code to get the demo to work?

Please show the solution in a working jsBin or Codepen.

https://jsbin.com/yihupap/1/edit?html,output 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>

<vaadin-context-menu>
  <template>
    <paper-listbox>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-listbox>
  </template>

  <p>This paragraph has the context menu provided in the above template.</p>
  <p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>

Upvotes: 0

Views: 306

Answers (2)

Let Me Tink About It
Let Me Tink About It

Reputation: 16122

Edit: @petey points out in a comment that this answer only applies when trying to run vaadin-context-menu from jsBin. So the problem might be between jsBin and Safari and not Vaadin and Safari.

This answer only applies to JSBin.

It works in Chrome. But not on Safari. (Running macOS Sierra v.10.12.5.)

vaadin-context-menu 
Browser  Support
-------  -------
Chrome     ✅
Safari     ❌

Safari apparently does not support vaadin-context-menu at this time. Below are screen recordings using Safari then Chrome.

(Note: In the below recordings: Green circles indicate a right click. Black circles indicate a left click.)

Safari ❌

v10.1.1 (12603.2.4):

enter image description here

Chrome ✅

v59.0.3071.115 (Official Build) (64-bit):

enter image description here

Upvotes: 0

petey
petey

Reputation: 17150

The problem is actually with JSBin and Safari. I cant even get the darn page to load in Safari (Version 10.1.1 12603.2.4).

But the main demo page does work in safari, chrome, etc: http://vaadin.com/elements/-/element/vaadin-context-menu#demos

Use that instead.

As requested here is a working codepen using the same example in your question : https://codepen.io/anon/pen/MozOxG

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>

<vaadin-context-menu>
  <template>
    <paper-listbox>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-listbox>
  </template>

  <p>This paragraph has the context menu provided in the above template.</p>
  <p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>

Upvotes: 1

Related Questions