CODEWITHSUNDEEP
javascripthtmlcssangular
Cristophs0n
Cristophs0n

Reputation: 1266

Pseudo-class :active not applied in Firefox only

I am building a slider component at the moment and the pseudo-class :active should be applied when the mouse button is held down and removed when it is released. This works perfectly in Chrome but does not seem to apply the class in Firefox.

CSS:

.thumb.lower.button.wide:active {
    background: red;
  }

HTML: 

<div class="container-fluid">

<div class="row">

    <div class="col-md-12">
        <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>
    </div>

    <div class="col-md-6 p-r-md p-b-md">
        <p class="text-black p-b-md">Button Handle - Custom Labels</p>
        <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider>
    </div>
</div>

TypeScript:

import { Component } from '@angular/core';
import { SliderValue, SliderOptions, ColorService, SliderStyle, SliderCalloutTrigger, SliderSize, SliderSnap, SliderType } from 'ux-aspects';

@Component({
selector: 'app',
templateUrl: './src/app.component.html'
})
export class AppComponent {

slider1: SliderExample;

lowerValue: number = 25;
upperValue: number = 75;

constructor(colorService: ColorService) {

    this.slider1 = {
        value: 50,
        options: {
            track: {
                ticks: {
                    major: {
                        steps: [0, 50, 100],
                        labels: true,
                        formatter: (value) => {
                            if (value === 0) {
                                return 'Minimum';
                            }
                            if (value === 50) {
                                return 'Default';
                            }
                            if (value === 100) {
                                return 'Maximum';
                            }
                        }
                    },
                    minor: {
                        show: false
                    }
                }
            }
        }
    };
}

interface SliderExample {
  value: number | SliderValue;
  options: SliderOptions;
}

I am working in Angular, so I have supplied an example of this in plunker: https://plnkr.co/edit/q7ixAlVsjNdQb8bA54hE?p=preview

Can someone explain what the issue is and how I can fix it? The :active class is applied as expected in Chrome but not Firefox.

I have already considered Active Pseudo CSS class not working for textbox in Firefox but I think this is a different problem since the OP was expecting :active to function the same as :focus

Thanks

Upvotes: 1

Views: 601

Answers (1)

jigar gala
jigar gala

Reputation: 1650

I have cross checked code, it seems proper from your end. it is a library which is binding few click events on the element which is preventing DOM to apply :active on click.

So I would suggest reporting this issue on github and till that time use @hostlistners callback to tackle this situatuion.

you can check how they have implemented mouse down and up. use same aproach and apply active class.

https://github.com/UXAspects/UXAspects/blob/develop/src/components/slider/slider.component.ts

Upvotes: 1

Related Questions