Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you run this code snippet, you'll notice that the div containing the text is not centered correctly over the pin. I also want the background color of the text to match the pin's color (it should be grey when at the leftmost position and colored otherwise). Additionally, I'd like to remove the circular hump behind it. Any assistance with CSS would be greatly appreciated!

If you have any suggestions on how to make this more efficient, please share them as well.

<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

The current css rule is causing the div to not expand properly or center the text. If you remove it, the layout will function as intended.

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

Alternatively, you can include "width: auto" in your inline style to resolve the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Returning a JSON representation of a JavaScript object

In the process of working on a script, I encountered a situation where an $.ajax call had to invoke a function upon success, returning a JavaScript object in JSON format [object object]. However, despite being able to return a well-formatted string, access ...

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

I am looking to iterate through an array of objects and call a method on them. If the result of that method meets certain conditions, I want to immediately return that result. The current implementation is as follows: public getFirstMatch(value: string, a ...

Remove the hyphen from a user input field using Angular 2 and reactive forms

After deleting data from input fields, I am facing an issue where the dynamic addition of a hyphen prevents the input field from being cleared. Is there a solution to this problem? How can I delete or clear the input fields effectively? Although I have ad ...

Unable to render data in HTML page using Vue component

home.html: <body> <div id="app"> {{ message }} </div> <div id="counter"> {{ counter }} </div> <script type="text/javascript" src="https://cdn.js ...

Attempting to transmit JavaScript information to my NodeJS server

Having some trouble sending geolocation data to NodeJS through a POST request. When I check the console log in my NodeJS code, it's just showing an empty object. I've already tested it with postman and had no issues receiving the data. The probl ...

Tips for applying textures dynamically to MeshPhongMaterial?

When trying to apply a texture on a THREE.MeshPhongMaterial, the texture fails to load. Here's the code snippet: let earth_geometry = new THREE.SphereGeometry(450, 10, 10) let earth_material = new THREE.MeshPhongMaterial({ emissive: 0xffffff }) ...

What is the best way to utilize Python in order to transform a large amount of unicode into characters to create a string-like appearance?

In JavaScript, I've managed to do this: eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,104,101,99,107,40,41,123,13,10,09,118,97,114,32,97,32,61,32,39,100,52,103,39,59,13,10,09,105,102,40,100,111,99,117,109,101,110,116,46,103,101,116,69 ...

"Troubleshooting the Issue of Unsuccessful Retrieval of Added Row Text Value

Struggling with retrieving text values from dynamically added rows? The first row data converts fine to PDF, but how do you push data through AngularJS from dynamic rows? Appreciate any help. See my code snippet below: <table id='myTable&a ...

Having trouble retrieving information from .pipe(map()) method

Encountering some issues with Observable handling. I have a function that returns an Observable. public getData(userId) { const data = this.execute({userId: userId}); return {event: "data.get", data: data} } private execute(input: SomeDt ...

Selecting CSS Properties with jQuery

I am trying to make an image change color to blue and also change the background color to blue when it is clicked inside a div. However, my code doesn't seem to be working as expected. Is there a more efficient way to apply CSS to elements? FIDDLE v ...

"Customize the look of the action button in Material-UI's

Is there a way to customize the appearance of action buttons within a Dialog, DatePicker, or TimePicker by accessing the containing div? I'm looking to add padding between these buttons and potentially change the background color of the div generated ...

Execute a function singularly upon vertical scrolling upwards or downwards

Looking for a solution to load two distinct animated graphics on a website when scrolling up or down, I managed to trigger the desired functions. However, there seems to be a bug where the functions are being triggered excessively: $(window).scroll(func ...

Find all elements within JSON data using lodash.js

Hello friends, I'm dealing with a JSON object: var companies = [ { id: 1, name: "Test Company", admin: "Test Admin" }, { id: 2, name: "Another Company", admin: "Test Admin", country: 'Spain' }, { id: 3, name: "New Company", ad ...

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

My goal is to display the delete icon when hovering over a specific menu item that is being mapped using the map function. The desired functionality is for the delete icon to appear on the corresponding menu item when it is hovered over. I attempted to i ...

Leveraging the reduce method in processing JSON data

Here is the JSON data I have: { "meta": { "totalPages": 13 }, "data": [{ "type": "articles", "id": "3", "attributes": { "title": "AAAAA", "body": "BBBB", "created": "2011-06-2 ...

Struggling to Collaborate with External PHP File Leads to Garbled Results

Recently started learning PHP and I'm pretty sure I have it set up correctly with my local IIS as I was able to use it in a form on another local website. For this particular project, I have a basic HTML file structured like this: <!doctype html&g ...

Using console.log() within a method while chaining in JavaScript/jQuery

I've been experimenting with developing jQuery plugins and I'm interested in chaining methods. The jQuery tutorial (found here: https://learn.jquery.com/plugins/basic-plugin-creation/) mentions that you can chain methods by adding return this; at ...

Mapping fields in Spring to JSON can be tricky, especially when dealing with fields that can be

In my object, there is a String value field which can contain either true or false. The issue arises when Spring/Jackson maps this to value: "true" as a String, causing problems with certain angularjs ng-model mappings that expect a boolean. Is there a way ...

Creating a new web application, I require a loading overlay to appear during transitions between pages

I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...