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
Related
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>
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'm taking my first steps in Polymer, and I'm stuck on custom CSS properties.
In my-item element, I am checking for the --my-item-color variable and assigning red as a default value:
<dom-module id="my-item">
<template>
<style>
:host {
display: inline-block;
padding: 5px;
}
.my-div {
background-color: var(--my-item-color, red);
display: block;
}
</style>
<div class="my-div">
<content></content>
</div>
</template>
<script>
Polymer({ is: "my-item" });
</script>
</dom-module>
These items are in the following container element, but somehow all my-items remain red.
<dom-module id="my-container">
<template>
<style>
:host {
--my-item-color: blue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>
<content></content>
</template>
<script>
Polymer({ is: "my-container" });
</script>
</dom-module>
plunkr: http://plnkr.co/edit/LovSp4VRAGpLadcr87Wz
Can anyone tell me what I am doing wrong?
You could use native CSS properties from Polymer 1.6.0 to allow your current code to work. Make sure to enable it by setting up your Polymer object's useNativeCSSProperties property before importing polymer.html:
<script>
Polymer = {
lazyRegister: true,
useNativeCSSProperties: true
};
</script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../x-element.html">
plunker
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%;
}