polymer absolute image position - html

I'm trying to learn Google Polymer, but I seem to fail at really simple things...
I currently have a drawer and a main page with a title bar as follows:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. -->
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="big-picture.html">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body unresolved touch-action="auto">
<core-drawer-panel>
<div drawer id="drawer">
<core-menu id="drawermenu">
<paper-item class="menulink">Home</paper-item>
<paper-item class="menulink">Gallery</paper-item>
<paper-item class="menulink">Calendar</paper-item>
<paper-item class="menulink">Contact</paper-item>
</core-menu>
</div>
<div main>
<core-header-panel mode="seamed">
<core-toolbar>
<core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
<h1 id="title">Test</h1>
</core-toolbar>
<div id="pagecontent">
<big-picture></big-picture>
</div>
</core-header-panel>
</div>
</core-drawer-panel>
</body>
</html>
I'm trying to create a picture element that will be shown directly beneath the title bar,
I want the picture to fill up the remaining screen space but also have a certain height. Later I want these pictures to change automatically. None of my styling seems to work though, my picture element looks like this:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="big-picture">
<template>
<style>
:host
{
height: 100px;
}
#crop
{
position: relative;
}
#mainpictop
{
position: absolute;
}
#mainpicbottom
{
position: absolute;
}
</style>
<div id="crop">
<img id="mainpictop" src="img/main/1.jpg"></img>
<img id="mainpicbottom" src="img/main/2.jpg"></img>
</div>
</template>
<script>
Polymer({});
</script>
</polymer-element>

A common problem is not setting up your page layout. Container elements generally need to be sized explicitly. I would suggest something like this:
<body fullbleed vertical layout unresolved touch-action="auto">
<core-drawer-panel flex>
fullbleed makes the body fit the viewport with no margin. vertical layout gives body flex-box layout ability. flex on the core-drawer-panel will cause it to fit to the body.
Additionally, all custom elements are display: inline by default (this is a DOM/CSS rule, not Polymer's). To set a size on an element, you need to make it block or inline-block.
:host
{
display: block;
height: 100px;
}

Related

Why won't polymer's flex attribute/class just work?

Browser: Firefox v35 OS: Linux Ubuntu 14, Polymer: v1.4
Was following Rob Dodson's polycasts - most of the videos mention using 'flex' (flexbox) to achieve responsive designs. I however have had a rough time getting it to work..
In the sample file listed below,
the flex attribute on the paper-header-panel is superflous (even without it, the element stretches - note the blue border
the flex attribute on the span tag within the toolbar DOES work - see the more icon scoot all the way to the right. This is good / expected
Finally I'd like the div with the content class to 'flex' - but it won't. Ideally there should be no white area.
The documentation & guide isn't helping a bit. Even the snippets on the guide are not working for me.
Code follows:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel='import' href='elements.html' />
<link rel="stylesheet" href="app.css" />
<style>
.icon-snooze {
color: red;
width: 48px;
height: 48px;
}
</style>
<style is="custom-style" include='iron-flex iron-positioning'>
body {
border: 1px dashed red;
}
paper-header-panel {
border: 2px dashed dodgerblue;
}
.content {
border: 2px dashed tomato;
background-color: var(--paper-light-blue-500);
}
</style>
</head>
<body class='fullbleed vertical layout'>
<paper-header-panel class='flex'>
<paper-toolbar>
<paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
<div>Header</div>
<span class='flex'></span>
<paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
</paper-toolbar>
<div class='content flex'>Content </div>
</paper-header-panel>
</body>
</html>
More observations:
Horizontal flex works as expected/out of the box.
For the vertical flex, it works if I set an explicit height on the parent/container - which kinda defeats the purpose.
<body class='fullbleed vertical layout'>
<div class='layout vertical container' style='height:50vh;' >
<div>one</div>
<div class="flex">two (won't flex without height set)</div>
<div>three</div>
</div>
<div class='layout horizontal container'>
<div>one</div>
<div class="flex">two (will flex)</div>
<div>three</div>
</div>
</div>
iron-flex-layout can be a hard one to use at the beginning and even later down the road.
Let's breakdown how we can achive the desired output.
First we need that fullbleed class on the body. That makes it so we are using the full size of the screen. Then we add the <paper-header-panel> element that will take care of displaying, positioning and sizing of our header and content. We don't need to add any classes to the paper-header-panel.
Next we add in two div elements. Other is the actual header with the paper-header class and other is the content host with fit class. The fit class takes care of making sure that our content fills the whole screen.
Inside of the first div with paper-header class we add in our toolbar and other content just as you had provided. That works and is correct.
If you would like to have different layout type for your content (horizontal or vertical for example) you can add the needed classess to the div with the fit class.
See the code below.
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include='iron-flex iron-positioning'>
body {
border: 1px dashed red;
}
paper-header-panel {
border: 2px dashed dodgerblue;
}
.fit {
#apply(--iron-positoning-fit);
height: 100%;
border: 2px dashed tomato;
background-color: #00B7FF;
}
</style>
</head>
<body class='fullbleed'>
<paper-header-panel>
<div class="paper-header">
<paper-toolbar>
<paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
<div>Header</div>
<span class="flex"></span>
<paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
</paper-toolbar>
</div>
<div class="fit">
<div>Content</div>
</div>
</paper-header-panel>
</body>

Polymer paper-header-panel won't render properly

I posted kinda similar problem here in StackOverFlow regarding paper-header-panel of Polymer it was answered but the solution isn't efficient or right way of doing it, you can look it here. Specific import should be made not the generic one as mentioned here.
My code for rendering it properly is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import"
href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import"
href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import"
href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
</head>
<body class="fullbleed layout vertical">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
</html>
But the problem is that this import is already been deprecated.
<link rel="import"
href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
The documentations recommended to use the new class which is.
<link rel="import"
href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
But it doesn't render properly the paper-header-panel.
What did I miss? Or what is my mistake? Any help would be deeply appreciated. Thanks!
From the source: https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html
A set of layout classes that let you specify layout properties directly in markup.
You must include this file in every element that needs to use them.
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
The following imports are available:
iron-flex
iron-flex-reverse
iron-flex-alignment
iron-flex-factors
iron-positioning
You'd only have to include the iron-flex and iron-positioning style modules for your use case.
Ex.
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-positioning"></style>
<body class="fullbleed layout vertical">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>

Polymer 1.0 Paper-Tabs Are Not Responsive To Content

Using Polymer 1.0, the paper-tab elements are not responsive to the size of their content/titles. Instead, all the tabs are a fixed size and it looks bad. From what I can tell, the default behavior is for them to be responsive to the title.
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
<paper-header-panel>
<paper-toolbar>
<paper-tabs>
<paper-tab>
ABOUT
</paper-tab>
<paper-tab>
<div>
TOUR SCHEDULE
</div>
</paper-tab>
<paper-tab>
<div>
VIDEOS
</div>
</paper-tab>
<paper-tab>
<div>
HOST
</div>
</paper-tab>
<paper-tab>
<div>
LONG TITLE THIS IS
</div>
</paper-tab>
</paper-tabs>
</paper-toolbar>
</paper-header-panel>
</body>
</script>
</html>
If you want the tabs to fit to their content, you can override the default tab flexing:
<style is="custom-style">
paper-tab {
flex: none;
}
</style>
http://jsbin.com/bizoso/edit?html,output
If you want the tabs to fill the toolbar, you can class="flex" to paper-tabs.
<paper-tabs class="flex">
http://jsbin.com/xevepi/edit?html,output
Try importing iron-flex-layout (make sure it's in your bower_components folder!) and using the selected and flex attributes like so:
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
...
<paper-tabs scrollable flex>
<paper-tab>
...
</paper-tab>
</paper-tabs>

Remove fade in Polymer Core-Scaffold

I've been working with MeteorJS and Polymer integration. I've done quite some code but I'm very poor at Design especially with CSS. Any idea how I can remove the fade in the area boxed in Red? I can change the background color, but I don't know how to remove the fading.
I'm using the following code for the Meteor Template:
<template name="default_template">
<head>
<title>agus</title>
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-input/paper-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
</head>
<body>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Profile" id="mnuItemProfile"></core-item>
<core-item label="Dashboard" id="mnuItemDashboard"></core-item>
</core-menu>
</core-header-panel>
<span tool>Agus System</span>
<div class="content">
{{> yield}}
</div>
</core-scaffold>
</body>
</template>
My css only changes colors. Any recommendations (in css) on removing the fade?
Use the "seamed" mode for core-header-panel as in the core-header-panel demo:
<core-header-panel mode="seamed"></core-header-panel>
You can set box-shadow to none, on the element you are changing the background color, so
box-shadow: none;
Hope this help.

Polymer core-input not rendering

I have code as follows:
<body unresolved>
<core-header-panel>
<core-toolbar layout horizontal center>
<h1 flex>Title</h1>
Users
Terms
</core-toolbar>
<div class="container" layout horizontal>
<core-input placeholder="Placeholder text here"></core-input>
</div>
</core-header-panel>
</body>
The problem is that my core-input component doesn't get rendered. The core-header panel and core-toolbar do, but the core-input doesn't. It gets a width and height of 0px. Even if I assign width and height to it, it renders with nothing inside. I'm loading all components using imports.
Am I missing something?
Imports are:
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../custom-components/admin-users.html">
<link rel="import" href="../components/core-input/core-input.html">
Chrome is version 38.
From the documentation:
Important: The core-header-panel will not display if its parent does not have a height.
Styling the core-header-panel with the appropriate height and width properties will display the placeholder. Live Demo available here.
Update your HTML imports to include core-toolbar:
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-input/core-input.html">
And add this styling on the same page as your HTML imports:
<style>
core-header-panel {
width: 360px;
height: 400px;
}
</style>
Replace
<core-input placeholder="Placeholder text here"></core-input>
with
<input is="core-input" placeholder="Placeholder text here">