I was trying to make my paper-dialog scrollable using paper-dialog-scrollable but i can't make it work.. I tried to simplify my code as much as possible, containing almost only ctrl+c and ctrl+v code from demo on github.
https://github.com/PolymerElements/paper-dialog-scrollable/blob/master/demo/index.html
But it seems like paper-dialog-scrollable isn't doing anything at all. (behave like it hasn't any logic and is simple element) The only thing that is different from demo page is that I am using shady dom instead of shadow.. (BTW, yes, I imported file into my project)
Anyone faced the same problem? Is there anyone who is using this element in shady dom and how?
Yes, <paper-dialog-scrollable> works in Shady DOM. The element's usage is the same for Shady DOM and Shadow DOM.
Here are working Codepens of the element's demo code:
Shady DOM demo
Shadow DOM demo
Related
I am trying to crawl this website https://www.wego.ae/en/flights/searches/cDXB-cSFO-2020-03-09:cSFO-cDXB-2020-03-22/economy/1a:0c:0i?sort=price&order=asc and I can't find any of the actual page content on the html code that appears on the inspector.
Are they using some sort of frame to hide the code? Anyone had any experience with this?
The content of the page is stored in the #shadow-root element. You can read more about the ShadowRoot in the Mozilla Developer docs.
If you need help traversing elements within a shadow DOM, you can reference this answer.
This code in the "element.style" exist in the DOM, but I cannot find it in the code I have. Another thing is that in the DOM it'll usually say where the code is (example: line 871), but it doesn't display that in this particular case. I have no idea why. Cannot anyone shed some insight to this?
If it helps at all I am using a Bootstrap theme and this particular portion involves the "owl carousel" DOM image
As others have commented, this style information is being added by JavaScript code. Specifically, if there's an "owl.carousel.js" floating around in your codebase, look for JQuery css calls that will look something like this example (from my copy of "owl.carousel.js"):
$this.css({"width": base.itemWidth})
I am trying to replicate the slide-up and tile-cascade transitions seen here using this jist with the polymer designer tool
The difference here is I want to use custom elements instead of tags. I created custom elements for each page and placed them all within a core-animated-pages.
I want all a grid of cards inside one of the pages to tile-cascade down and the core-scroll-header to slide-up just like in the above jist but every way I try to nest the tags to put the transition attributes on the desired children, nothing works. The only thing that works is setting the core-animated-pages transitions attribute to "cross-fade-all." Very frustrating since documentation/examples on tile-cascade is scarce.
Example site: http://marissageoffroy.ored.net
Github repo: https://github.com/ocorso/marissageoffroy
Message from Arthur off the Polymer Google Group:
This puzzled me, too, until I cracked open the tile-cascade file:
https://github.com/Polymer/core-animated-pages/blob/master/transitions/tile-cascade.html
Look in there, and you'll see that the transitions require each tile to be a .
The quick solution here is just to wrap each of your core-cards in a .
There is an open issue about this: https://github.com/Polymer/core-animated-pages/issues/14
You might want to follow that issue for updates.
Thanks,
Arthur
I was looking for some plugin that could easily generate a CSS statement from my HTML template. So The moment I create a DOM element, should be possible to generate a CSS statement to access that DOM element.
Could be a simple one that just adds the whole DOM order from my outter element to the desire element. Any suggestions are welcome. Thanks
I'm finding the same like you, if you know something, tell me please.
But you can try it:
http://lab.xms.pl/css-generator/
I hope you can use it, #artdias90
I'm currently redesigning an old web application that relies heavily on frames. I'd like to get rid of the frames because the painful javascript gyrations they require, but would still like the user to have a movable border between two parts of the screen (view and attributes).
What html element, or html element + javascript, can I use to replace frames?
I don't think there are any solutions that won't involve JavaScript. If you're OK with that, you could replace them with <div> elements and use JavaScript to make them resizeable.
I see no other solution than a div. But you would have to use JS again to allow the dragging of the border. Use of JQuery would be fine here as there is maybe a plugin for that, check the database.