I want to set the width of some elements within container elements in Polymer which is not working as I expected. Here's some small example:
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
I set the container to 50% width. Since the paper-input within that container is set to width 100%, I thought it considers 100% of its parent, i.e., 50% of the document.
However, the paper-input takes the whole width and does not react to the 50% of the container. How can I set the width (or height) of the container such that the internal element (in this case the paper-input) does use it as a percentual reference?
Thanks for your help!
width: 50%; is not reflecting because your container has display: inline change it to display: block
If you want it to be center aligned give margin-left:auto; margin-right:auto
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
Related
Unable to style an element using Shadow DOM with Polymer 1.x or 2.x. Consider the following custom element in Polymer 2.0:
<link rel="import" href="../polymer/polymer.html">
<!--
`semantic-ui-button`
#demo demo/index.html
-->
<dom-module id="polymer-button">
<template>
<div class$="button {{size}}">{{label}}</div>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() {
return 'polymer-button';
}
static get properties() {
return {
label: {
type: String,
value: 'polymer-element'
},
size: { type: String }
};
}
}
window.customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
in the demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer-element demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../polymer-element.html">
<style is="custom-style" include="demo-pages-shared-styles"></style>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.button {
background: #ccc;
border-radius: 4px;
color: #444;
}
.button.big {
font-size: 1rem;
padding: 6px;
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic polymer-element demo</h3>
<demo-snippet>
<template>
<polymer-button label="Demo"></polymer-button>
</template>
</demo-snippet>
</div>
</body>
</html>
The styles defined in the demo for .button and .button.big are not applied to the shadow element; however, in Polymer 1.x the styles are applied if we use ShadyDOM:
<link rel="import" href="../polymer/polymer.html">
<!--
`polymer-button`
#demo demo/index.html
-->
<dom-module id="polymer-button">
<template>
<div class$="button {{size}}">{{label}}</div>
</template>
<script>
Polymer({
is: 'polymer-button',
properties: {
label: { type: String }
},
});
</script>
</dom-module>
is there a way to select/style these inner elements using external styles?
Below is a visual representation of what I said above in order of appearance:
Polymer 1.x using Shadow DOM
Polymer 1.x using ShadyDOM
Polymer 2.x
To enable styling points, use CSS variables/mixins.
Add a <style> tag to your element's template:
<dom-module id="polymer-button">
<template>
<style>
.button {
#apply --my-button-mixin;
}
.button.big {
#apply --my-button-big-mixin;
}
</style>
...
</template>
</dom-module>
Specify the mixin in a container element:
<dom-module id="x-foo">
<template>
<style>
polymer-button {
--my-button-mixin: {
background: red;
color: white;
};
}
</style>
<polymer-button label="Red button"></polymer-button>
</template>
</dom-module>
...or in index.html:
<body>
<custom-style>
<style>
polymer-button {
--my-button-mixin: {
background: red;
color: white;
};
}
</style>
</custom-style>
<polymer-button label="Red button"></polymer-button>
</body>
codepen (Polymer 1)
codepen (Polymer 2)
Alternately, you can add a <style> element with an #import url rule inside your custom element <template> that will import an external stylesheet:
<template>
<style>
#import url( external.css )
</style>
<div class$="button {{size}}">{{label}}</div>
</template>
In your CSS stylesheet (example: external.css) you can define standard CSS:
.button {
background: #ccc;
border-radius: 4px;
color: #444;
}
.button.big {
font-size: 1rem;
padding: 6px;
}
Is it possible to bind a variable to these <paper-item-body> attributes: two-line and three-line?
For example:
<paper-item>
<paper-item-body {{item.lineCount}}>
<div>Title</div>
<div secondary>Description</div>
</paper-item-body>
<iron-icon></iron-icon>
</paper-item>
where item.lineCount is 'two-line' or 'three-line'.
I have used data bindings on a target attribute in other areas (i.e., style$="color: {{myColor}};"), but that method doesn't seem to work for <paper-item-body>.
Thanks!
Attribute bindings (i.e., with $=) are bound to Boolean variables, where the attribute is set when the bound value is true, and removed when false.
Assuming item.enableTwoLines is a Boolean, you'd bind <paper-item-body>.twoLine like this:
<paper-item-body two-line$="[[item.enableTwoLines]]">
...
</paper-item-body>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-item/paper-item-body.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-checkbox {
margin: 20px;
}
paper-item-body {
border: solid 1px red;
--paper-item-body-two-line-min-height: 200px;
}
</style>
<paper-checkbox active="{{enableTwoLine}}">Enable 2-line paper-item</paper-checkbox>
<paper-item>
<paper-item-body two-line$="[[enableTwoLine]]">
<div>Profile Photo</div>
<div secondary>Change your Google+ profile photo</div>
</paper-item-body>
</paper-item>
</template>
</dom-module>
</body>
codepen
I want to change css of Polymer component paper-dropdown-menu. I want to change the width of inner element - iron-dropdown (or paper-listbox) that is in the shadow dom of dropdown.
Should I make new custom element and how to change css of this element?
I tried this:
<dom-module id="my-button">
<style is="custom-style">
paper-dropdown-menu {
--paper-dropdown-menu-ripple: {
width: 500px;
}
}
</style>
<template>
<content></content>
</template>
<script>
Polymer({
is: 'my-button'
})
</script>
</dom-module>
<my-button>
<paper-dropdown-menu label="Your favourite pastry">
<paper-listbox class="dropdown-content">
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</my-button>
Are you trying to use a button to trigger a dropdown menu like this? Then you can use 'paper-menu-button' element.
If you want to use just the paper-dropdown-menu then
You can use any of the paper-input-container and paper-menu-button
style mixins and custom properties to style the internal input and
menu button respectively.
To change width:
paper-dropdown-menu{
-paper-input-container: {
width: 100px;
}
}
To set the width of the paper-listbox, change your selector to paper-listbox:
paper-listbox {
width: 500px;
}
To set the widths of paper-listbox and paper-dropdown-menu to be the same:
paper-dropdown-menu,
paper-listbox {
width: 500px;
}
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-dropdown-menu,
paper-listbox {
width: 500px;
}
</style>
<paper-dropdown-menu label="Your favourite pastry">
<paper-listbox class="dropdown-content">
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-foo' });
});
</script>
</dom-module>
</body>
codepen
I'm having trouble understanding why I can't pass a custom CSS property for a background image to a polymer element. Using CCS properties for styling Polymer elements is explained here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details and this works for some elements (example the grey background in my code below).
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, white);
background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
/* THIS WORKS
background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
*/
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
Polymer({ is: 'my-element'});
</script>
</dom-module>
<my-element></my-element>
</body>
I have two question:
Why isn't this working?
What is the best way to solve this?
Code is here: http://jsbin.com/yuxobexepe/edit?html,output
Thanks!
Paul
You are mixing the definition/usage of CSS property. Here is a working JSBIN of your problem:
<html>
<head>
<base href="http://polygit.org/polymer/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, blue);
background-image: var(--container-background, "default.png");
--container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({ is: 'my-element'});
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
background-image is using the value of --container-background if it exists, or default to what you give. Then you define separately the --container-background property, usually, outside of the component itself.
I am new with polymer and I am experimenting a little with it. How can i set my component to full height?
This is what i have and for some reason i can't get it to work. It only has the height of his content:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="reactive-navbar">
<style>
div {
display: block;
width: 20%;
height: 100%;
background-color: #2c3e50;
}
</style>
<template>
<div>
<content></content>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "reactive-navbar",
});
</script>
If you want your Polymer element to be affected by your style instead of your div, you can change that div in your style tag to :host to make your style affect the host https://www.polymer-project.org/1.0/docs/devguide/styling.html
Updated code:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="reactive-navbar">
<style>
:host {
display: block;
width: 20%;
height: 100%;
background-color: #2c3e50;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: "reactive-navbar",
});
</script>
In your index.html file, set style for html tag:
html {
height: 100%;
}