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
Related
Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.
Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM.
The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item at hand, ala. the invisible item could be a paragraph in the header, and switching a random footer span-s top position on/off will make the header paragraph regain visibility.
Before toggling a random CSS element
After toggling a random CSS element
This happens on pages that have a fixed loader applied to them, eg. a component that has position fixed, a superhigh z-index and encompasses the whole screen. This page loader is displayed until ngOnInit finishes, meaning it is pretty fast most of the time. Disabling this loader seems to fix the issue.
This also sometimes happens to text in {{ var }} tags, when the var value is loaded after the page has loaded.
We have tried toggling the loader with either
*ngIf="true/false"
OR
[style.display]="block/none"
Neither of these solutions work, some of the dom is still invisible.
Does anyone have a clue as to why this happens?
I think this question has been answered here: custom #font-face does not load in chrome (chrome custom fonts not rendering)
I have done a quick test and it seems to have fixed things.
Basically I was including the custom font many times (each time a SCSS file was added to a component), so I have moved it, so it's only being loaded a single time, and it now loads fine.
The issue is multiple inclusion in google chrome, I face similar issue when using angular4 and material lite.The problem is i imported fonts in every component and fixed it by importing font in single main parent component.
I have a basic slide-in slide-out animation for each route on enter and leave within my AngularJS app.
The animations work perfectly on desktop, although bug out on mobile. They do seem to work within the dev tools emulator though.
I have tracked it down to having something to do with the views position not being set correctly with the absolute position. Seems as if when a new view is loaded, they both exist within the page, hence making the pages width twice and large until the old view is unloaded and removed. I then tried a position relative on the parent container, although no luck.
WORKING DEMO
Use overflow: hidden for the container of your views, in the case of your plnkr, it's the <body>
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
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.
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