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>
Related
I'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:
EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 100%;
}
#main {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<h1>Welcome</h1>
<div class="container-fluid" id="main">
<h1>This is a heading</h1>
<div class="row">
<div class="col-sm-3 div1">Left side</div>
<div class="col-sm-6 div2">Middle</div>
<div class="col-sm-3 div3">Right side</div>
</div>
</div>
</body>
</html>
Try this
.row {
height: 100vh;
}
More information here:
https://stackoverflow.com/a/16837667/7361767
I want to import an element that contains a paper-fab and have the paper-fab overlap the seam between the app-header element and the imported element. (In this case, I'm calling the imported element a fab-element). In other words, I simply want the paper-fab to "float" (as advertised and like it's supposed to).
What I expect it to look like:
jsBin
What it actually looks like:
FAB inside app-toolbar. (works) Click here for jsBin.
FAB outside app-toolbar but inside app-header. (works) Click here for jsBin.
FAB outside app-header and inside main-content. (fails) Click here for jsBin.
I need to use the app-header-layout element and import the fab-element inside the main content section. As the above 3 jsBins show, that last combination seems to break the element (causing the top half of the paper-fab to hide underneath the app-toolbar).
How do I get the entire paper-fab to float over the app-toolbar while using the fab-element inside the main content section of the app-header-layout?
Or does this potentially expose a possible bug in app-header-layout element itself?
Edit
z-index (on paper-fab) has no effect.
Notice the last example has the z-index increased to 99999. It still seems to have no effect on the output.
Edit 2
z-index (on parent element) has no effect.
Also, setting the z-index on the parent element fab-element also has no impact on the result.
Edit 3
I wonder if what's happening with the z-index described in this question (read the comments) is related?
Per #robodna on Polymer Slack Site provides the following answer:
Set z-index:2!important on #contentContainer.
See this jsBin.
http://jsbin.com/mitegigose/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-icon/iron-icon.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="app-layout/app-drawer/app-drawer.html" rel="import">
<link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
<link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
<link href="app-layout/app-header/app-header.html" rel="import">
<link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
<link href="paper-fab/paper-fab.html" rel="import">
</head>
<body>
<dom-module id="fab-element">
<template>
<style>
paper-fab {
position: absolute;
right: 40px;
top: 40px;
z-index: 99999;
}
</style>
<paper-fab icon="add"></paper-fab>
</template>
<script>
(function(){
Polymer({
is: "fab-element",
properties: {},
});
})();
</script>
</dom-module>
<dom-module id="x-element">
<template>
<style>
app-toolbar {
color: white;
background-color: #3F51B5;
z-index: 1;
}
app-header-layout ::content #contentContainer {
z-index: 2!important;
}
fab-element {
z-index: 99999;
}
</style>
<app-header-layout>
<app-header fixed condenses effects="waterfall">
<app-toolbar>
<div main-title>App name</div>
</app-toolbar>
</app-header>
<div>
main content
<fab-element></fab-element>
</div>
</app-header-layout>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
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">
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;
}
I have gotten a weird problem with my columns using Twitter bootstrap. Setting up a test page that should behave like the example here: http://twitter.github.io/bootstrap/examples/hero.html . Here's the html:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" />
<script type="text/javascript" src="/assets/8b15478e/jquery.js"></script>
<script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4" style="border: 1px solid red;"></div>
<div class="span4" style="border: 1px solid red;"></div>
<div class="span4" style="border: 1px solid red;"></div>
</div>
</div>
</body>
Should produce the result shown in the link above, but i get the third span4 on the next line, it gets pushed under the two first. Apart from this the container behaves as expected, i.e. it is centered.
What am I missing here?
Border adds pixels to width so span4 is now increased to 302px (border-left: 1px + border-right: 1px) from 300px and hence comes to the next line. See here
border: 1px solid red;
You can give a background instead of border to test.
Check fiddle
Applying a border is breaking your layout by adding some width to your spans.
The native bootstrap solution for handling "column styles" are the .well elements.
HTML
<div class="row">
<div class="span4">
<div class="well well-with-my-style">
</div>
</div>
<div class="span4"></div>
<div class="span4"></div>
</div>
CSS
.well-with-my-style {
border: 1px solid red;
background: none;
/* whatever... */
}
That way, you will respect the native layout and take profit from the .well element, but remember that you'll have to override .well styles with your own (using .well-with-my-style class).