Greg Gum Greg Gum - 4 months ago 13
CSS Question

Why are these styles not being applied?

I have this css:

.custom-gauge.wj-gauge {
padding: 0px 10px;
}
.custom-gauge.wj-gauge .wj-face path {
fill: #d0d0d0;
stroke: none;
}
.custom-gauge.wj-gauge .wj-pointer path {
fill: #404040;
stroke: none;
}
.custom-gauge.wj-gauge circle.wj-pointer {
fill: #404040;
stroke: none;
transform-origin: center center 0px;
transform: scale(1);
transition: transform .5s;
}
.custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer {
fill: red;
stroke: black;
stroke-width: 2px;
transform: scale(1.3);
transition: transform 1s, fill 0.5s, stroke 0.5s;
}


and this html:

<div class="custom-gauge p-x">
<wj-linear-gauge value.bind="currentProgram.progress" class="au-target" au-target-id="97">
<div ref="element" class="au-target wj-control wj-gauge wj-lineargauge" au-target-id="95" tabindex="0"><div wj-part="dsvg" style="width:100%;height:100%">
<svg wj-part="svg" width="100%" height="100%" style="overflow:visible">
<defs>
<filter wj-part="filter" id="wj-gauge-filter-1"><feOffset dx="3" dy="3"></feOffset><feGaussianBlur result="offset-blur" stdDeviation="5"> </feGaussianBlur><feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite><feFlood flood-color="black" flood-opacity="0.2" result="color"></feFlood><feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite><feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite></filter></defs><g wj-part="gface" class="wj-face" style="cursor:inherit"><path wj-part="pface" filter="url(#wj-gauge-filter-1)" d="M 48 0 L 264 0 L 264 19 L 48 19 Z"></path></g><g wj-part="granges" style="cursor:inherit"></g><g wj-part="gpointer" class="wj-pointer" style="cursor:inherit"><path wj-part="ppointer" d="M 48 0 L 156 0 L 156 19 L 48 19 Z" filter="url(#wj-gauge-filter-1)"></path></g><g wj-part="gcover" style="cursor:inherit"><circle wj-part="cvalue" class="wj-pointer wj-thumb" cx="156" cy="9.5" r="16"></circle><text wj-part="value" class="wj-value" x="146.3906" y="14.5">50</text><text wj-part="min" class="wj-min" x="38.125" y="15.5">0</text><text wj-part="max" class="wj-max" x="268" y="15.5">100</text></g></svg></div></div>
</wj-linear-gauge>
</div>


However, none of the styles are being applied.

I have verified that the css is being loaded on the page.

What is the issue?

Answer

You need to put spaces before your periods in the css.

.custom-gauge.wj-gauge {
  padding: 0px 10px;
}
.custom-gauge.wj-gauge .wj-face path {
  fill: #d0d0d0;
  stroke: none;
}

should be:

.custom-gauge .wj-gauge {
  padding: 0px 10px;
}
.custom-gauge .wj-gauge .wj-face path {
  fill: #d0d0d0;
  stroke: none;
}

etc.

a working jsfiddle.