I'm new to Polymer, and I'm failing to center the text of an element.
I have this code that represents menu items
<paper-item flex center>Element1</paper-item>
<paper-item flex center horizontal>Element2</paper-item>
<paper-item flex>Element3</paper-item>
<paper-item flex>Element4</paper-item>
<paper-item flex>Element5</paper-item>
The flex works but the center doesn't.
Maybe I need to do this in CSS? But what should I put in CSS to just center those Elements?
How about this:
<paper-item center-justified flex>Element2</paper-item>
See here.
You could try the center-center attribute on most polymer element which will center an element both horizontally and vertically.
<paper-item center-center>Element2</paper-item>
you have to add this layout
<paper-item flex horizontal layout center center-justified>Element2</paper-item>
and center center-justified is for vertical way
Related
I've been trying to figure out how to center an element inside a v-col for almost an hour
I can't find the right solution.
I am trying to center the a element by putting justify-content in the v-col, but it just stay
there and wont move.
<v-row v-if="hideFullDetail">
<v-col cols="12" md="9" style="justify-content: center;">
<a #click="displayFullDetail = !displayFullDetail">view more</a>
</v-col>
</v-row>
text-align: center is a property specific for this use case. Works either on the parent, or on the child itself if it is a block-level element.
Use this:
text-align: center;
(This is not specific to v-col).
For details see https://www.w3schools.com/cssref/pr_text_text-align.ASP
In my app I am using core-drawer-toggle to toogle after clicking the menu-item.
Sample:
<core-scaffold id="core_scaffold">
<core-header-panel mode="seamed" id="core_header_panel" navigation flex>
<core-toolbar id="core_toolbar"></core-toolbar>
<core-menu selected="Item1" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
<core-item id="core_item" core-drawer-toggle horizontal center layout icon="settings" label="Item1" active></core-item>
<core-item id="core_item1" core-drawer-toggle horizontal center layout icon="settings" label="Item2"></core-item>
</core-menu>
</core-header-panel>
<div id="div" tool>Title</div>
</core-scaffold>
This works fine with chrome in wide and narrow layout.
With firefox and safari it also works fine in the narrow layout. But when I resize the window to wide with safari and firefox the menue-items disappear.
Can I use core-drawer-toggle and display the menu items in the wide layout?
I find a way. core-scaffold has a method "togglePanel" (see example)
<core-scaffold id="core_scaffold">
<core-header-panel mode="seamed" id="core_header_panel" navigation flex>
<core-toolbar id="core_toolbar"></core-toolbar>
<core-menu selected="Item1" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
<core-item label="Item1" icon="settings" size="24" id="core_item" on-tap="{{ doSomething }}" horizontal center layout active></core-item>
<core-item label="Item2" icon="settings" size="24" id="core_item1" horizontal center layout></core-item>
</core-menu>
</core-header-panel>
<div id="div" tool>Title</div>
</core-scaffold>
Polymer('my-element', {
doSomething: function (){
this.$.core_scaffold.togglePanel();
}
});
<core-toolbar class="tall" horizontal start-justified layout>
<div class="logo"><img src="assets/logo.png"></div>
<h1 class="bottom">Company name</h1>
</core-toolbar>
In the above code I have horizontal start-justified layout which mean the element within core-toolbar align to left.
Now I want to change the start-justified to center-justified when screen size below 700px. How to do that with core-media-query ?
Can we just wrap the code to <core-media-query> or we have to create a custom element?
if you have a auto-binding template on the index file there is no need to do it in a custom-element. also polymer has the ability to check attributes against a boolean by using the attribute?="{{value}}" syntax. in the case below start-justified?="{{!queryMatches}}" means that if the page is more then 700px in width queryMatches will be false and content will justify left. while center-justified?="{{queryMatches}}" means that if the page is smaller then the 700px in width queryMatches will be true and content will be center-justified
it would look something like
<template is="auto-binding">
<core-media-query query="max-width:700px" queryMatches="{{queryMatches}}"></core-media-query>
<core-toolbar class="tall" horizontal start-justified?="{{!queryMatches}}" center-justified?="{{queryMatches}}" layout>
<div class="logo"><img src="assets/logo.png"></div>
<h1 class="bottom">Company name</h1>
</core-toolbar>
</template>
here is it working http://plnkr.co/edit/VYdFOt89E6RH7fTTlZ5m?p=preview
edited for completeness
Why is my z-index being ignored?
<core-drawer-panel>
<div drawer>
Test
</div>
<div main>
<core-icon-button core-drawer-toggle icon="menu" style="z-index:1000 !important;"></core-icon-button>
<my-element style="z-index:-1000 !important;"></my-element>
</div>
</core-drawer-panel>
my-element has <core-animated-pages fit> and it does not care at all about the z-index? Its stays on top all the time?
EDIT:
z-index:1000 !important does not work.
But in my-element I can do this <core-animated-pages fit selected="{{subPage}}" style="overflow:auto; z-index:-1;"> but then the overflow does not work meaning I see a scroll bar but it does not scroll?
(https://github.com/Polymer/core-animated-pages/issues/36)
Add position:relative as well as a z-index on elements. If you don't explicitly set a position, the z-index does not work (also for 'normal' HTML).
I've got a Polymer <core-scaffold> and I've put it in cover mode. Cover mode correctly moves the content of the main panel up onto the toolbar, but it disables the hamburger toggle button. No hover-border, no click event. Is this a bug? Is there another way to achieve the 'cover' effect?
Here's the code snippet of the scaffold and content -
<core-scaffold responsiveWidth="1200px" mode="cover">
<core-header-panel navigation flex mode="seamed">
<core-toolbar horizontal layout end class="nav-toolbar">
<core-item flex label="john.johnson#example.com"></core-item>
</core-toolbar>
<core-menu theme="core-light-theme" selected="0" selectedItem="{{item}}">
<core-item label="Inbox"></core-item>
<core-item label="Upcoming"></core-item>
<core-item label="All Tasks"></core-item>
<core-item label="Completed"></core-item>
</core-menu>
</core-header-panel>
<div tool>{{item.label}}</div>
<div fit horizontal center-justified layout class="card-container">
<main-card flex></main-card>
</div>
</core-scaffold>
I've also got some margins on the top of my card-container class pushing it down so it lines up with the edge of the toolbar. Screenshot of what it looks like here.