custom css property not working
laurent...@thomsonreuters.com
Hi there,
I’ve been battling with this for a while now and I can’t figure it out.
I’m unable to get even a simple custom css property working using polymer.
Here ismy component definition have:
<!-- Import Polymer -->
<link rel="import" href="bower_components/polymer/polymer.html">
<!-- Define your custom element -->
<dom-module id="edit-label">
<template>
<style >
.someLabel {
background-color: var(--edit-label-title-color,blue);
}
</style>
<div hidden$="{{inEditMode}}">
<label class=" someLabel ">{{label}}</label>
<span id="editLabel" class="icon-compose"></span>
</div>
<div hidden$="{{!inEditMode}}">
<input id="labelInput" value="{{label::input}}"></input>
<span id="saveLabel" class="edit icon-compose"></span>
</div>
</template>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/rxjs/dist/rx.all.js"></script>
<script>
Polymer({
is:'edit-label',
properties: {
label:{
type:String,
notify:true
}
},
ready: function() {
var $this = this;
this.inEditMode = false;
Rx.Observable.fromEvent(this.$.editLabel, 'click').subscribe(function (){
$this.inEditMode = true;
});
Rx.Observable.fromEvent(this.$.saveLabel, 'click').subscribe(function (){
$this.inEditMode = false;
});
},
attached: function() {
}
});
</script>
</dom-module>
When I run this in Chrome without setting the property I expect the label to be blue, but instead it keeps it’s default user agent color (black).
When I open the chrome dev tool, and I inspect the CSS, I get a warning “Invalid property value”.
So something is not happening.
Any ideas ?
This e-mail is for the sole use of the intended recipient and contains information that may be privileged and/or confidential. If you are not an intended recipient, please notify the sender by return e-mail and delete this e-mail and any attachments. Certain required legal entity disclosures can be accessed on our website.
Eric Bidelman
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/F9270B849A6A7C478D3C26FDFA973DE9236AAFBE%40C111SMZLMBX01.ERF.thomson.com.
For more options, visit https://groups.google.com/d/optout.
laurent...@thomsonreuters.com
Hi Eric,
I set it as the default here background-color: var(--edit-label-title-color,blue);
I also tried to set it up using
:root {
--edit-label-title-color:blue;
}
Or
:host {
--edit-label-title-color:blue;
}
But this didin’t work neither and I prefer the sortest syntax provided by var(prop,default)
Eric Bidelman
laurent...@thomsonreuters.com
Thanks you helped me to find where the issue was.
If I use your version of polymer https://polygit.org/polymer/components/polymer/polymer.html things works.
But if I use the one from bower "polymer": "Polymer/polymer#1.0.0"
It does not. By upgrading to 1.1 it works.
Now the funny thing is that I’m sure I got this version by following the getting started instruction on the official web site.
And I guess I just got some really bad luck since they changed the version 2 days ago (which probably fixed he issue) (roughly where I started to implement this feature and started battling :p)
https://github.com/Polymer/docs/commit/1385ab162b9691976d1705706857db4e1de73ec8
Anyway thanks again Eric.
From: Lepinay, Laurent (Financial&Risk)
Sent: vendredi 18 septembre 2015 10:42
To: 'Eric Bidelman'; polym...@googlegroups.com
Subject: RE: [polymer-dev] custom css property not working
Hi Eric,
I set it as the default here background-color: var(--edit-label-title-color,blue);
I also tried to set it up using
:root {
--edit-label-title-color:blue;
}
Or
:host {
--edit-label-title-color:blue;
}
But this didin’t work neither and I prefer the sortest syntax provided by var(prop,default)
From: Eric Bidelman [mailto:ebi...@gmail.com]
Sent: vendredi 18 septembre 2015 10:38
To: Lepinay, Laurent (Financial&Risk);
polym...@googlegroups.com
Subject: Re: [polymer-dev] custom css property not working
I don't see where you're defining --edit-label-title-color to be blue.
laurent...@thomsonreuters.com
And I’ve just noticed that you were the author of the change, so you must be aware of it ;)
I don't see where you're defining --edit-label-title-color to be blue.