I have just been testing some polymer 1.0 elements. I noticed that using the paper-input element it is not possible to drag highlight text entered into it.
It is possible to use keyboard shortcuts to highlight text and it is also possible to double click.
I have checked the documentation and i cannot see if this is intended functionality, can anyone shed any light?
This seems to be fixed in the recent update to iron-input or paper-input.
It works fine in the demo now.
https://elements.polymer-project.org/elements/paper-input?view=demo:demo/index.html
Related
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.
I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:
The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.
Is it possible to inspect such elements?
Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.
Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.
I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.
The calendar popup of Google Chrome is not in Shadow DOM.
It's in a separated page mapped to a popup window. See WebPagePopupImpl.cpp
And the popup content is written by HTML/JavaScript.
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.
I am experiencing a weird behavior of the polymer designer tool. When I click on the code/designer toggle button it switches to the code. Then when I switch back to the design it is gone. The Tree also only shows the default my-element element. Am I the only one who is experiencing such behavior? Is there a solution?
PS: I'm using chrome.
If you can't wait for the fix on the Polymer site, then you can clone the designer code from GitHub https://github.com/Polymer/designer and you'll find that the bug doesn't exist in that code.
I just got the message of the new released plugin from Emmet in sublime text 2.
I tried it out but i still get the same issue as before meaning I can't make the wrapping action work. None of the demos in the following link are working for me : http://docs.emmet.io/actions/wrap-with-abbreviation/
For instance in the first demo it says "Wrap with Abbreviation" using Shift+Ctrl+A shortcut, and it's supposed to open a dialog box in which you can input your abreviation code wrapping. But it doesn't work. Instead, this shortcut selects the word where i trigger it and if i keep doing so it adds the nearby words or tags, but still no dialog box.
Does anybody has the same issue? Anyone knows how to fix it?
Thank you in advance.
Those shortcuts in docs are for demo boxes only. Your plugin may have different shortcuts.
In Sublime Text: https://github.com/sergeche/emmet-sublime#available-actions
How do I hide the annoying yellow box that appears under html fields when I hover over elements in the Chrome "Developer Tools" elements panel - it's driving me nuts as I can't see the bottom of my labels etc...
From the posted bug: "https://code.google.com/p/chromium/issues/detail?id=282493". If you hold keyboard Control (Ctrl) key before hovering the element (or command on a mac) the tooltip won't show. Not the ideal solution but it works as long as you know about it
You might want to check Chrome 16 which got an improved element tooltip. Please comment on the bug and mention specific issues that you want to get fixed.
You can pretty easily tweak devtools yourself. Basically, follow these instructions to get started.
Then, inside inspector.js, tweak WebInspector.highlightDOMNode, by applying this small patch.
1150,1151c1150
< // Do not highlight the DOM node.
< //this.highlightDOMNodeForTwoSeconds(nodeId);
---
> this.highlightDOMNodeForTwoSeconds(nodeId);
Fore more info, check out this post on extending Chrome DevTools.