I want to be able to place the paper-icon-button to the right/end of the paper-toolbar. This is what I have tried.
<paper-toolbar class="toolbar" justify="end">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<span class="title">{{page}}</span>
<paper-icon-button icon="check-box" class="justify"></paper-icon-button>
</paper-toolbar>
I have tried with middle-justify and bottom-justify too. The effect currently is they are placed side by side
Also I have tried the demo here https://elements.polymer-project.org/elements/paper-toolbar?view=demo:demo/index.html&active=paper-toolbar
cant achieve that effect.
Any suggestions or examples thanks.
You can use the iron-flex-layout. Import it and then add the class="flex" to the <span>
Why don't you try float:right css property on your paper-icon-buttons
Related
I am using something like this:
<neon-animated-pages class="flex" selected="{{route}}" attr-for-selected="data-route" on-iron-select="_pageChanged" on-neon-animation-finish="_onNeonAnimationFinish">
<sys-neonpage1 data-route="home" id="page1" class="fit"></sys-neonpage1>
<sys-neonpage2 data-route="users" id="page2" class="fit"></sys-neonpage2>
<sys-elemento data-route="contact" id="page3" class="fit"></sys-elemento>
</neon-animated-pages>
That works fine, with the animations inside >sys-neonpage1...> But inside that element I have other elements which have some animations, what i want to do is that the animation of the element inside also run, but in this case it doesnt work, only the animations of works.
for exmaple inside I have something like this:
dom-module id="sys-neonpage1">
<template>
<sys-elemento class="prueba"></sys-elemento>
</template>
And the element has his own animations that never started if i use it inside ...
is that posible?, thanks a lot.
What you want to do is actually built-in the neon-animated-pages component: Running animations encapsulated in children nodes
In general, i recommend you read the whole "using neon-animations" guide as it is well written.
I'm having problems interacting with a selectable list of paper-item objects. The on-tap (or on-click) function is only firing when I click the iron-icon within the item, but the rest of the cell is unresponsive. I'm currently displaying the items within a paper-menu, but I've tried using iron-selector which yields the same behavior.
<paper-menu selected="{{selected}}">
<paper-item on-tap="_onItemTap" role="menuitem">
<iron-icon icon="cloud-done"></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary class="second-item-line">Complete</div>
</paper-item-body>
</paper-item>
(... other items)
</paper-menu>
The paper-menu is nested within a neon-animated-pages element and a paper-card element. I don't know if that's affecting its behavior at all.
Am I missing anything? Is there a way to make the entire paper-item clickable that I just haven't implemented? Or could other elements be interfering?
Update:
Upon further digging, I've found that my list of 'paper-item' elements works perfectly if I remove it from the context of the paper-card element. The moment I put the list inside a card, it masks the selectable area somehow (but the iron-icon is still exposed). Is there any way to expose the entire paper-item element to selection in this context? If not, I'll have to redesign my UI to not use paper-card.
I figured it out. Silly bug, really. Because my list was not inside a div with class="card-content", the paper-item elements weren't showing on the top layer of the card, becoming unusable. Adding a div with that class around my content solved my issue. Here's how the code turned out:
<paper-card>
<div class="card-content">
<iron-selector selected="{{selected}}">
<paper-icon-item on-tap="_onItemTap">
<iron-icon icon="cloud-done" item-icon></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary>Complete</div>
</paper-item-body>
</paper-icon-item>
<!-- other items -->
</iron-selector>
</div>
</paper-card>
<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.
I started with
<core-tooltip label="{{editor.userEditor.username}}"
position="left">
<paper-icon-button id="accountbutton" icon="account-circle"
halign="right">
</paper-icon-button>
</core-tooltip>
which is pretty textbook and works fine.
Now I want the icon button to be a menu instead so I changed it to
<core-tooltip label="{{editor.userEditor.username}}"
position="left">
<paper-menu-button id="accountbutton" icon="account-circle"
halign="right">
<paper-item label="Logout {{editor.userEditor.username}}">
</paper-item>
</paper-menu-button>
</core-tooltip>
Problem is (somewhat unsurprisingly maybe in hindsight) the tooltip is open when the menu is open to. Obviously that is undesirable.
How do I avoid that?
See jsbin.com/saziziwixu
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>