Google Web Components don't render when used with iron-pages - polymer

I am having an issue where I cannot get google-maps to load within iron-pages. I have found a Git Issue logged but there is no reply.
Anyone know a temporary fix for this issue?
Thanks Matt

I have found that the issue was being cause by the map element having a height of 0px. I rectified this issue by ensuring the top level element was an iron-flex-layout and propagating the following css attributes to all elements/div down to the level of the map element.
#apply(--layout-flex);
#apply(--layout-vertical);
Matt

Related

Polymer.dart: drag and drop of elements inside ShadowDom

I am creating a sortable-list polymer element whose elements can be reordered using drag-n-drop operation. The problem is, I can't seem to get the elements inside a polymer element's shadowdom to react to drag-start event. However, interestingly, drag-over, drag-enter, drag-leave and drop events work fine.
Do elements inside shadowdom react to start-drag event?
You can find the code in the following link:
https://github.com/tejainece/sortable-list/tree/master/web/sortable-list
You can take a look at http://www.polymer-project.org/docs/elements/core-elements.html#core-drag-drop how they do it but I assume you are running into this Chrome bug https://code.google.com/p/chromium/issues/detail?id=264983. It is already marked as fixed but it takes a while until it lands in Dartium. If you have a recent Chrome version you can try if it works in Chrome.

core-animated-pages hero transition z-index

I am trying to implement a "topeka"-like UI (http://www.polymer-project.org/apps/topeka/) web-application with polymer. Here it is a preview (http://nautes-dashboard.herokuapp.com/) and this the following url is my project github page (https://github.com/NikZar/nautes-freedomotic-dashboard).
As you can see there is a problem (I think related to the nautes-box element z-index, since all the nautes-box elements will get the same z-index), when the hero transition rolls back to the main dashboard (f.e. tapping on environments, and the back arrow. Instead the triggers nautes-box works fine since it is the last sibling added).
Any suggestion on how to solve this issue? Is it really related to the element z-index or to the transition z-index?
I both tried to give an higher z-index to the environments nautes-box, to its section and to the core-animated-pages transition but it changed nothing... Looking at the topeka code I have seen a needZ attribute in the topeka-categories CSS. Am I missing something?
PS: the https certificate is self signed, ajax request will fail if you don't try to access the api page first (https://fritz.bestmazzo.it:9113/) ...it's a feature :)
please check:
polymer-tile-window

How do I hook paper-tabs and core-animated-pages together?

I've been going over Rob Dudson's I/O talk (at 27:00) and trying to use core-animated-pages with paper-tabs.
When I click the tab, I would like some respective content to be shown, with the animation.
I tried to follow Rob's approach of using the designer, but somehow I do not get the 'selected' property in the properties panel.
The polymer docs cover tabs and animated-pages separately, so I don't know how I can get them to work together.
Can someone point me in the right direction?
There is a bug in the currently deployed designer tool that prevents certain bindable attributes from being displayed in the properties pane. It has been fixed in master, so the next time the Polymer team deploys the tool, it should fix your problem.
In the meantime, you could install the tool using bower install Polymer/designer#master to get the fixed version locally.
core-animated-pages works with div tags. Then just add addEventListener to select the page.
Here is a working example (jsfiddle): Click here.

AIR - Disable context menu

I'm building an app with an image upload function. While the uploading process is on I need to disable the context menu (right-click) or at least the items in it.
How to do it?
Thanks.
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d00.html
This answers your questions... look at Customizing the context menu paragraph
have you tried with this method? this should remove all the elements in your menu.
Hope this helps

Flash Overlapping HTML. CSS Problem In IE?

HELP, this is a very unique problem and I can't for the life of me figure it out.
My flash content is overlapping the HTML above it.
This only happens if I've just launched IE after being restarted and goes away once I refresh the page. I even added a jQuery $(document).ready function that sets a margin between the html and the flash content to add 1px of space when the page is loaded. It's so hard to figure out, because once I refresh the page, it goes away.
Any input GREATLY appreciated.
Here is the site.
http://www.californiaremodels.com
(This only happens in IE)
here is a screen shot of the problem.
########### SOLVED ###################### SOLVED
I set the flash output as a javascript var (actually json_encoded PHP output) and on document load inserted the object into the "flashContent" div with the jQuery.(document).ready event.
Thank you to Andy Shellam!!
Have you tried loading your flash content using jQuery? I.e. set your div width/height in your HTML with a "this requires javascript/flash" placeholder, then have jQuery load the OBJECT into the div on page load. This way cures IE7's annoying "click here to activate this control" issue - may be a similar issue.
It may be due to the fact that you're floating that DIV that holds the flash content. It shouldn't matter, but sometimes IE gets hinky about such things. Try taking off the float and see if that cures the problem. If it does, create a non-floating workaround.
looks like it is the -4px of margin top you have that is creating the problem