What is the reason that the css backdrop-filter: blur() is functioning properly everywhere except on the active bootstrap-4 list-group-item?

I have a gallery with an album-card component inside, and within that is a carousel.
I noticed that when I add a list-group and set one of the items as active, it remains unblurred. Can anyone help me understand why?

Here is the HTML for the gallery component:

<div class="row">
        <div class="col-3">
            <div class="list-group">
                <a 
                    *ngFor="let album of galleryAlbums" 
                    class="list-group-item list-group-item-secondary list-group-item-action 
                           d-flex justify-content-between align-items-center"
                    routerLink="/gallery"
                    [queryParams]="{ selectedAlbumId: album.id }"
                    [class.active]="selectedAlbumId === album.id">
                    
                    {{ album.name }}
                    <span class="badge badge-warning badge-pill">{{ album.photos.length}}</span>
                </a>
            </div>
        </div>

        <album-card class="col-9" *ngIf="selectedAlbum" [album]="selectedAlbum"></album-card>
    </div>

The carousel styles are defined in the .scss file:

.gallery-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(100, 100, 100, 0.4);
    backdrop-filter: blur(5px);

Here is the result screenshot:

https://i.sstatic.net/C2egP.jpg

htmlcssangularbootstrap-4sass

Answer №1

After some investigation, I discovered that the issue stemmed from a CSS property attributed to Bootstrap's .active class:

.list-group-item.active {
    z-index: 2;
}

To resolve this, I simply assigned a higher z-index value (e.g. 5) to my .gallery-carousel, effectively covering up the troublesome active list group item 😄

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

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

htmlcsshtml-listscentering

Submitting an HTML form results in no data being sent

I am currently facing an issue with a form on my website. The form code is as follows: <form action="" method="post" id="login_form"> <input type="text" name="log_login_form"/> <br/> <input type="password" name="log_password_for ...

phphtmlforms

Calling functions in AngularJS/HTML can help you execute specific

Just started with angularjs and facing some major issues haha... I have something that seems to be working fine, but I can't figure out what's wrong with this code... can someone please help me? Here it is: Basically, the scope.create function ...

javascripthtmlangularjs

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. https://i.sstatic.net/XIeiQ4E ...

htmlcssangular

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, b ...

javascriptcssiconspngcss-sprites

Issue with organizing columns in Plotly-Dash using personalized CSS

I expected the code below to create three adjacent drop-down menus under a tab labeled Setup, but I'm actually seeing them stacked on top of each other. What mistake am I making? Any guidance would be highly appreciated! I've provided the releva ...

pythoncssplotly-dash

The function setCustomValidity() will continue to display even after the form has been successfully filled out

My form is very simple and I am trying to validate it using the required attribute: <form name="form"> <label for="Header">Title</label> <input type="text" class="span5" name="Header" ng-model="Message.header" placeholder="Title" on ...

javascripthtmlangularjsrequired

Strategies to prevent page refresh following a CSS modification in Ionic/angular

Working with ionic4 (angular6) and livereload here. What I Need - The ability to instantly load CSS in the browser without having to refresh the entire page. Can this be done? ...

angularionic-frameworkionic2angular-cli

Embed the YouTube video using the URL in the video tag

I tried using the <video> tag, but I'm having trouble getting it to play videos from YouTube. Even though I found this http://jsfiddle.net/wCrNw/, it doesn't seem to work as expected. I also consulted Show Youtube video source into HTML5 ...

htmlvideoyoutube

I'm struggling to make background-image display properly in my CSS code

In my quest to enhance the appearance of my website, I've been grappling with getting the background-image property to cooperate in CSS for the past three days. It's frustrating because I've successfully implemented this feature before, but ...

htmlcss

Refreshing a page using AJAX form functionalities

After spending some time searching, I am unable to find a satisfactory solution to my issue. I have a "finance" tracker that includes hidden divs which are displayed using jQuery when the corresponding button is clicked. Additionally, I have an Asset Track ...

javascriptphpjqueryhtmlajax

Retrieve the encrypted URL

I'm facing an issue with extracting parameters from an encrypted URL. When using the queryparams function, it only retrieves a portion of the URL after being decrypted. For instance, consider this example URL: http://localhost:4200/househouse? MGRjYjQ ...

javascriptangular

The specified path "/src/app/app.module.ts" was not found while attempting to add ng in an Angular project that is using a custom path

I encountered an issue while attempting to integrate Angular Universal into my project. Here is my folder structure: src main app app.module.ts node_modules tsconfig.json My project uses Angular version 15.2.5 and the latest version of Angular Uni ...

angularnpmangular-cliangular-universal

There was an issue retrieving the value from the $.ajax() error function, as it returned [

After successfully receiving data from the input field and sending it to the database, everything seems to be working fine. However, when attempting to retrieve the data after sending it to the database, an error is encountered: [object HTMLInputElement]. ...

javascriptjqueryhtmlajax

Guide to implementing the patchValues() method in conjunction with the <mat-form-field> within the (keyup.enter) event binding

I am currently working on a feature that populates the city based on a zip code input. I have successfully achieved this functionality using normal HTML tags with the (keyup) event binding. However, when trying to implement it using CSS, I had to use (keyu ...

javascriptangulartypescript

At times, MomentJS may miscalculate and add an incorrect number of hours

My goal is to add a specific amount of hours to a 24-hour time, but I'm encountering an issue with the time 00:00. The code I've written works correctly for all times except midnight. For example, if I have 01:30 and add 1 hour, it gives me 02:3 ...

javascriptangulartimemomentjs

Javascript isn't being executed by Internet Explorer as expected

I'm currently working on a web application that requires backend processing while simultaneously showing the information on the screen. AJAX seems like the ideal solution, so I've implemented it in my project. However, before initiating the AJAX ...

javascripthtmlajaxinternet-explorer

Unable to display ChartJs within the same DIV on the webpage

I'm struggling to display the Pie Chart from ChartJs in the correct DIV when I click from the left DIV. Running the chart directly works fine, but I want them both on the same page in separate DIVs. I have separate HTML files for each link and they wo ...

javascriptjqueryhtmlcsschart.js

execute script upon changes to the DOM of the embedded vendor component

Incorporating a vendor component into MyComponent. @Component({ selector: 'my-component', template: `<vendor-component></vendor-component>` }) export class MyComponent { constructor() { } } Looking to execute some jQuery ope ...

angular

NGRX reducer avoids generating errors due to incorrect assignments

My experience with ngrx is relatively new. In my typical TypeScript work, I usually encounter an incorrect assignment error like the one below due to a missing property in the interface declaration: interface IExample { count: number; } let initialState ...

angulartypescriptngrx