I have a polymer element that I'm inserting into an html page where I'm using fullbleed in the body tag to leave no margins, and I want the element to fill the entire page. I'm trying to center some text in this element vertically on the page, but the usual layout attributes I'm using don't seem to have any effect. See the attached example.
<script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<polymer-element name="polymer-css-test">
<template>
<style>
#test {
background-color: green;
}
</style>
<div id="test" fit>
<div vertical layout center>
I want this text to be vertically and horizontally centered.
</div>
</div>
</template>
<script>
Polymer('polymer-css-test', {
ready: function () {
}
});
</script>
</polymer-element>
<body unresolved fullbleed layout vertical>
<polymer-css-test></polymer-css-test>
</body>
i was able to get it to work in chrome 41 and firefox 36.0.4 by moving the vertical layout attribute to the #test div and using center-justified in place of center then putting self-center attribute on the inner div.
<script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<polymer-element name="polymer-css-test">
<template>
<style>
#test {
background-color: green;
}
</style>
<div id="test" fit layout vertical center-justified>
<div self-center>
I want this text to be vertically and horizontally centered.
</div>
</div>
</template>
<script>
Polymer('polymer-css-test', {
ready: function () {
}
});
</script>
</polymer-element>
<body unresolved fullbleed layout vertical>
<polymer-css-test></polymer-css-test>
</body>
example here http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview
Related
I'm struggling to find a solution to a problem that I have.
What I'm trying to achieve is a DIV that is inside bootstrap's .container to span full width to the right of the container (till it hits the screen), but be INSIDE container on the left.
Example code :
<div class="container">
<div class="extended-div"></div>
</div>
I just want the extended-div to stick to the left of CONTAINER element, and span all the way to the right of the screen from there (Outside of the container).
I'm attaching an example of what I'm trying to achieve. Normally, if the box was only BG colour etc etc, I'd either go with box-shadow or :after methods, but this won't work here.
Here's what I'm trying to achieve
Thanks in advance!
Try giving position absolute to the extended div and you have not properly closed your class tag for container
<div class="container">
<div class="extended-div"></div>
</div>
First close your class tag for container properly.
Increase the width of child div as your need.
.container{
background-color:red;
}
.extended-div
{
background-color:green;
width:110%;
margin-left:20px;
margin-top:20px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="extended-div">
<h1>
jfksdjfksdjfds
</h1>
<h1>
overflow div sssssssssssssssssssddsssssssdddddddddddd
</h1>
</div>
</div>
</body>
</html>
I have a single page app which I experimenting a bit with layout. Whilst I try to understand it, I am trying to position a element at the centre of the content area of a element. I am using as the header of all of this.
Here is the overall form of the body area of my index.html
<body unresolved class="fullbleed layout vertical">
<template id="app" is="dom-bind">
<paper-header-panel class="flex" mode="standard">
<paper-toolbar> ... </paper-toolbar>
<neon-animated-pages
class="flex"
selected="[[route]]"
attr-for-selected="selector"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation">
<pas-menu path="/" selector="home" route="{{route}}" access=[[user.keys]]></pas-menu>
.............. More elements
</neon-animated-pages>
</paper-header-panel>
Looking at my element
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../pas-route-behaviour/pas-route-behaviour.html">
<template>
<style>
paper-card: {
width:400px;
height:200px;
}
</style>
<div class="vertical layout center">
<div class="horizontal layout">
<div class="flex"></div>
<paper-card heading="PAS MENU to go here"></paper-card>
<div class="flex"></div>
</div>
</div>
</template>
<script>
Polymer({
is: 'pas-menu',
behaviors :[PAS.RouteBehaviour,Polymer.NeonAnimatableBehavior],
properties: {
access: {
type: Array,
value: []
}
}
});
</script>
</dom-module>
When I load all this up and look at the result with the chome dev tools I find that the element has zero height and the only height I can seemingly introduce it the Text of the paper card and its padding.
The net result is the card sits in the top of the content area (centered), with the card size just that to surround the text. Why have I lost the height of the full screen and what do I need to do to centre the card vertically.
The only mistake you are doing here is in your style section, the selector for the paper-card is
paper-card and not paper-card:
Also give a background-color or a shadow to your paper-card if you want to see it,
Both <div class='flex'></div> are not useful because the parent div is already centered. Finally your element shoud look like
<dom-module id="pas-menu">
<template>
<style>
:host
{
#apply(--layout-vertical); // vertical layout for the host of pas-menu
#apply(--layout-center-center); // make the host center its element
// or if you want you to keep it simple
// display:box
top: 350px; // margin-top for the element pas-menu
}
paper-card {
width:400px;
height:200px;
background-color:gray // color to the paper-card or
#apply(--shadow-elevation-2dp);// use the predifined mixin for shadow elevation
}
</style>
<div class="vertical layout center">
<div class="horizontal layout">
<paper-card heading="PAS MENU to go here"></paper-card>
</div>
</div>
</template>
<script>
Polymer({
is: 'pas-menu',
behaviors :[PAS.RouteBehaviour,Polymer.NeonAnimatableBehavior],
properties: {
access: {
type: Array,
value: []
}
}
});
</script>
</dom-module>
:
I want to create a structure where i have a list and i can animate each item of the list with hero transitions. But if i make it like this then all items get on top of each other... What should I do?
<template repeat="{{item in items}}">
<div layout vertical content
flex>
<core-animated-pages content
layout vertical flex >
<section>
<paper-shadow class="chain">
{{item}}
</paper-shadow>
</section>
<section>
{{item.artists}}
</section>
</core-animated-pages>
</div>
</template>
To keep the items from overlapping you need to make sure that your element has a height. You can do this by using layout attributes on the body itself and your custom element instance.
<body fullbleed layout vertical>
<polymer-element name="x-foo">
<template>
<template repeat="{{item in items}}">
<div layout vertical flex>
<core-animated-pages layout vertical flex>
<section>
{{item.artist}}
</section>
</core-animated-pages>
</div>
</template>
</template>
<script>
Polymer({
items: [
{
artist: 'Some dude'
},
{
artist: 'Some other dude'
}
]
});
</script>
</polymer-element>
<x-foo layout vertical flex></x-foo>
</body>
Example jsbin
I am currently having my first tries with Polymer.
What I have is a custom polymer element nested in a core-animated-pages element on the main page.
The sources are:
index.html
<core-header-panel>
<core-toolbar>
[...]
</core-toolbar>
<core-animated-pages transitions="slide-from-right">
[...]
<section>
<contact-page></contact-page>
</section>
</core-animated-pages>
</core-header-panel>
contact-page.html
<polymer-element name="contact-page">
<template>
[...]
<div layout horizontal start-justified>
<div class="placeholder">
</div>
<div class="contact-box" layout horizontal center-justified flex three>
<div class="form-container" layout vertical>
<h2>Contact</h2>
<paper-input class="additional-dist" floatingLabel label="Name"></paper-input>
<paper-input id="mail" floatingLabel label="Mail"></paper-input>
<div layout horizontal>
<paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input>
</div>
<paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button>
</div>
</div>
</div>
[...]
</template>
[...]
</polymer-element>
The HTML file currently looks like this in Chrome 37.
Now what I'd like to have is that the yellow bar (placeholder) is vertically stretched over the whole viewport, like this.
Unfortunately I can't figure out which polymer layout attributes I have to use to achieve this and in which tags I have to put them. Can anybody help me here?
Edited to incorporate feedback from sjmiles:
Give this a shot:
<body fullbleed layout vertical>
<polymer-element name="x-foo" layout vertical>
<template>
<style>
#header {
background: tomato;
}
#col {
background: yellow;
}
</style>
<div id="header" layout horizontal>
Header
</div>
<div id="main" flex layout horizontal>
<div flex id="col">Col</div>
<div flex layout vertical>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<x-foo flex></x-foo>
</body>
I'm using the fullbleed attribute to set the body to 100vh and telling it to layout its children vertically using flexbox. Then setting x-foo to flex so it fills the screen. Then it's just a matter of getting the right children to flex.
Here's a jsbin to preview.
I want the "Go!" button to fill the remaining vertical area within each section. Where a section is defined as the area from the blue text to the light grey border at the bottom of each section.
Right now, it hangs out in the top right corner.
As you can see, each section is variable in size, so I can't just use a "static" solution. Furthermore, in the future, I may be dynamically changing the content within each section, which would cause further reflows.
I am using twitter bootstrap and Dart, the code below is the Dart html I use for the rendering of each section.
<!DOCTYPE html>
<html>
<head>
<title>x-search-result</title>
<link rel="components" href="packages/widget/components/collapse.html">
</head>
<body>
<element name="x-search-result" constructor="SearchResultComponent" extends="div">
<template>
<div class="row-fluid" style="border-bottom: 1px solid #eee;">
<span class="span10">
<div class="accordion-heading" >
<a class="accordion-toggle" data-toggle="collapse">{{name}}</a>
</div>
<p>{{description}}</p>
</span>
<button class="btn span2" style="height:100%;" on-click="switchToCardView()">Go!</button>
</div>
<script type="application/dart" src="xsearchresult.dart"></script>
<script src="packages/browser/dart.js"></script>
</template>
</element>
</body>
</html>
If you make the div position: relative and the button absolute, you can set the height to fill:
http://jsfiddle.net/hyXYJ/
there is not enough information there, but here is an example.
if your container div has relative positioning, then you can apsolute position the button.
for example
div
{
position:relative;
}
button
{
position:absolute;
top:0;//it reach parent top
bottom:0;//it reach parent bottom
width:some width;
}
if you are using this approach, keep in mind the positioning of the other elements that are within the container div.
i've managed to create a fiddle with bootstrap included. Take a look
I am posting to show what I got with Alfred's changes.
The modified code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>x-search-result</title>
<link rel="components" href="packages/widget/components/collapse.html">
</head>
<body>
<element name="x-search-result" constructor="SearchResultComponent" extends="div">
<template>
<div class="row-fluid" style="position:relative; border-bottom: 1px solid #eee;">
<span class="span10">
<div class="accordion-heading" >
<a class="accordion-toggle" data-toggle="collapse">{{name}}</a>
</div>
<p>{{description}}</p>
</span>
<button class="btn offset10 span2" style="position:absolute; top:0; bottom:0;" on-click="switchToCardView()">Go!</button>
</div>
<script type="application/dart" src="xsearchresult.dart"></script>
<script src="packages/browser/dart.js"></script>
</template>
</element>
</body>
</html>