Trouble styling extended polymer element (paper-slider)

Question

I am trying to extend the Polymer paper-slider element to be able to take an enumerated list and iterate over these values in the slider instead of only displaying numeric values. But I'm having trouble getting the styles to work. As you can see if you run this code snippet, the div with the text in it isn't centered over the pin correctly. I'd also like the background color of the text to match the pin (it should be grey on the left-most position and colored on the others). I'd also like to get rid of the circular hump behind it. Your CSS help is greatly appreciated!

Also, if you have any recommendations for how to do any of this more efficiently, please chime in.

 <script src="http://www.polymer-project.org/platform.js"></script> <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <link href="http://www.polymer-project.org/components/paper-slider/paper-slider.html" rel="import"> <polymer-element name="rate-picker" extends="paper-slider" attributes="snaps pin disabled secondaryProgress editable immediateValue"> <template> <link rel="stylesheet" href="http://www.polymer-project.org/components/paper-slider/paper-slider.css"> <style> .pin > #sliderKnob > #sliderKnobInner::after { white-space: nowrap; content: attr(value); width: auto; left: calc(15px - 100%); background: #3f51b5; border: 5px solid #3f51b5; border-radius: 5px; padding: 0 10px 0 10px; height: 12px; top: -3px; line-height: 10px; text-align: center; color: #fff; font-size: 10px; -webkit-transform: scale(0) translate(0); transform: scale(0) translate(0); } </style> <template if="{{!disabled}}"> <core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys> <core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys> </template> <div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}"> <div class="bar-container"> <paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryProgress="{{secondaryProgress}}" on-down="{{bardown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress> </div> <template if="{{snaps && !disabled}}"> <div class="slider-markers" horizontal layout> <template repeat="{{markers}}"> <div flex class="slider-marker"></div> </template> </div> </template> <div id="sliderKnob" on-down="{{expandKnob}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" center-justified center horizontal layout> <div id="sliderKnobInner" value="{{enumValue}}"></div> </div> </div> <template if="{{editable}}"> <paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input> </template> </template> <script> Polymer('rate-picker', { ready: function () { this.disabled = false; this.snaps = true; this.pin = true; this.min = 0; this.max = 5; this.value = 0; this.enumValues = ["No rating", "Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"]; this.enumValue = this.enumValues[this.value]; }, immediateValueChanged: function() { this.enumValue = this.enumValues[this.immediateValue]; this.super(); } }); </script> </polymer-element> <polymer-element name="my-element" noscript> <template> <style> :host { font-family: "Helvetica Neue", sans-serif; } :host .label { width: 150px; } </style> <div layout horizontal> <div class="label" self-center>RED</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>GREEN</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>BLUE</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>ORANGE</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>PURPLE</div> <rate-picker></rate-picker> </div> </template> </polymer-element> <my-element></my-element> 

Answer 1

Your css has the following rule which prevents the div to extend (or to center the text). Remove it and it will work as expected.

.pin > #sliderKnob > #sliderKnobInner::after {
  width: 32px;
}

(Or) add a "width: auto" in your own inline style. Should work.