I am using this sample from Polymer demos and try to toggle side bar menu on page start up with HTML markup. So that Polymer is in narrow layout by default.
At https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold is described responsiveWidth but it does not impact the behavior.
<core-scaffold id="gui" >
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<div class="device-name">
device
</div>
</core-toolbar>
<core-menu>
<core-item label="Help" onclick="window.open('')"></core-item>
</core-menu>
</core-header-panel>
<div tool>
tools
</div>
<div id="content"></div>
</core-scaffold>
Did you wait for Polymer to be ready?
This should work - untested thought - give it a try:
window.addEventListener('polymer-ready', function (e) {
document.getElementById("gui").responsiveWidth = "1920px";
});
Related
In my Polymer 0.5 app, core-scaffold has stopped showing it's menu in latest version of Chrome(49).
Here is basic core-scaffold Plunk, Chrome dose not show the menu items.
It there some way to get the menu back?
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Application</core-toolbar>
<core-menu theme="core-light-theme">
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<div tool>Title</div>
<div>
Main content goes here...
</div>
</core-scaffold>
That's a Chrome bug https://github.com/Polymer/polymer/issues/3499
The bug is already fixed in Canary (51).
Chrome pre-49 erroneously supported ::content[attribute] as a synonym for attribute]::content (not surprisingly, because the spec is hella confusing).
I'm using Polymer Starter Kit as a base for an app.
So, this is a single page app with routing to specific section.
My index is basically unchanged, you can see it here https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html.
Now I have my custom element here
<dom-module id="lista-contatti">
<template>
<iron-ajax url="../../api/get_contacts.php" last-response="{{data}}" auto></iron-ajax>
<iron-list items="{{data}}" as="item" id="list">
<template>
<paper-icon-item>
<avatar class$="[[item.classe]]" item-icon></avatar>
<paper-item-body two-line>
<div><span>[[item.nome]]</span> <span>[[item.cognome]]</span></div>
<div secondary><span>[[item.tipo]]</span></div>
</paper-item-body>
</paper-icon-item>
</template>
</iron-list>
</template>
</dom-module>
This works because if I give a fit class to my iron-list I can see my list populating. The only problem is that my list will render under my main app header (and that makes sense because of the fit layout given to my list).
Also, the list works great with header if I put it on a single html file, as you can see in iron-list official demo pages.
Now I want to keep my list in an external dom-module, but I need it to work seamlessly with other elements of the page in the single page app scenario of the polymer starter kit.
EDIT: this is my index.html one page app layout
<body>
<template is="dom-bind" id="app">
<paper-drawer-panel>
<paper-scroll-header-panel drawer fixed>
<paper-toolbar> ... </paper-toolbar>
<paper-menu> ... </paper-menu>
</paper-scroll-header-panel>
<paper-scroll-header-panel main condenses keep-condensed-header>
<paper-toolbar> ... </paper-toolbar>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="foo"> ... </section>
<section data-route="contact">
<!-- HERE IS MY DOM-MODULE -->
<lista-contatti></lista-contatti>
</section>
</iron-pages>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
</body>
My iron-list does not work as expected with paper-scroll-header-panel because it is nested inside many elements like iron-pages, section and my custom dom-module. The list can't interact with the header height and doesn't scroll seamlessly with it.
In earlier versions of polymer you had to bind your list's scrollTarget to header panel's scroller. There is a slide about this in a Polymer 0.5 video #11:58. In which case the updated code in Polymer 1.0 might look something like:
<paper-scroll-header-panel id="hPanel" main condenses keep-condensed-header>
<iron-list id="list" items="{{data}}" as="item" >
...
</iron-list>
</paper-scroll-header-panel>
script:
document.querySelector("#list").scrollTarget = document.querySelector("#hPanel").scroller;
NB: I haven't tested this yet but figured it might help to point you in the right direction for now.
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader" style="height:100px; background-color:#E5E5E5; padding-top:18px;">
<span><my-logo>
<img src="images/logo.png" />
</my-logo></span>
</core-toolbar>
<core-menu>
<core-item name="livemusic" label="Live music"><paper-ripple></paper-ripple></core-item>
</core-menu>
</core-header-panel>
<paper-input label="Your Name" block></paper-input>
</core-scaffold>
I want the paper-input to show in the navigation bar. But it doesn't. how do I do it? (I tried to put it within the core-toolbar tags)
Thanks in advance
If you put it in your core-toolbar it should work.
Have you tried using other html to test if it really is just the papêr-input, or any html ? If this is only the paper-input, it's probably just an import issue (as peter said). If not, it's probably a css issue.
Anyway, sending us a plunk link would help us.
The application I am developing consists of several major sections. To this end, I have a global toolbar for the entire application and a toolbar that is specific to the particular section of the application.
Here is a gist that demonstrates what the view for an individual application might look like:
https://gist.github.com/mattjonesorg/33b2bbcb0b0c81feb5ca
(Paste the gist into the polymer designer for a quick view)
I have the main application's toolbar as a core-scroll-header-panel. The submenu is in the content. The problem is that the submenu is scrolling under the core-scroll-header panel, which I can easily see as by design, but I'm hoping somebody has a tip for allowing me to keep both the main core-scroll-header-panel and the toolbar locked at the top of the screen. I've tried nesting a core-header-panel in the section, but that did the same thing.
My actual application is in Dart, but I'd be happy with a Javascript answer.
Thanks in advance,
Matt
You have the submenu core-toolbar nested in the scroll region (the <section id="section2" content>). If you want it to stay, put it before that scroll region:
<core-toolbar id="core_toolbar" class="tall">
...
<div id="div1" class="bottom indent">Title</div>
</core-toolbar>
<core-toolbar id="core_toolbar1">
<core-icon-button icon="menu" id="core_icon_button3"></core-icon-button>
<div id="div2" flex>Submenu Toolbar</div>
</core-toolbar>
<section id="section2" content>
<p id="p">Hello, World</p>
...
If you want the both to stay put on scrolling:
<core-scroll-header-panel fixed>
If you want just the submenu to stick:
<core-scroll-header-panel>
If you want the header to condense and have them both stick:
<core-scroll-header-panel condenses keepCondensedHeader>
I started using the polymer core-pages and core-menu elements.
And I wan to know if I am implementing it right.
My page is simple and looks like this:
<core-menu selected="0" selected="{{selected}}">
<core-item label="Organization"></core-item>
<core-item label="Bank Setup"></core-item>
</core-header-panel>
<span tool class="tabAdminPolymer_title"></span>
<core-pages class="sss" selected="{{selected}}">
<div class="pages">
Hi there content1!
</div>
</core-pages>
Using Java Script on menu click event I am changing the content of the class .page
My content is backbone controls that renders using obj.render js function.
Your implementation is sound but there are some simple errors which are breaking it. Please try the following corrections.
You're using the "selected" attribute twice:
<core-menu selected="0" selected="{{selected}}">
to
<core-menu selected="{{selected}}">
You're closing the wrong tag:
</core-header-panel>
to
</core-menu>
That's it. Code works otherwise.