Blur function not performing as anticipated

I am attempting to achieve a blur effect on a dialog pop-up.

Currently, I am using the primeng p-dialog component for this purpose.

<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>

<p-dialog header="HELLO" [(visible)]="display" modal="modal" [responsive]="true" [width]="350" [minWidth]="200" (onHide)="close($event)" >
    <span>hi</span>

</p-dialog>

To apply the blur effect in CSS, I have used the following code:

::ng-deep .ui-widget-overlay {
      filter: blur(20px);
}

However, the issue I am facing is that the blur effect is not working as expected.

Instead of a true blur effect, what I am seeing is more of a "glow" effect. You can view a demo showcasing this here. For reference, a real blur effect example can be found here.

javascripthtmlcssangularprimeng

Answer №1

I have successfully resolved the issue.

The solution involves wrapping the content that needs to be blurred in a div, and then applying the effect using ngclass when the dialog is expanded.

<div [class.container]="display">
  <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>

</div>
<p-dialog header="HELLO" [(visible)]="display" modal="modal" [responsive]="true" [width]="350" [minWidth]="200" (onHide)="close($event)" >
    <span>hi</span>

</p-dialog>

For the CSS styling:

.container {
  filter: blur(3px);
}

You can view a demo of the solution here.

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

The return type of a server-side component in NextJS 14 when it is asynchronous

When using NextJS 14, I encountered a problem with the example provided in the documentation. The example is within the Page component, typically typed as NextPage. However, this type does not support the use of async await server components. In my case, ...

javascriptreactjsnext.js

When PHP echo of json_encode triggers an error, AJAX status 200 will be raised

Despite everything running smoothly in the program below, an AJAX error is triggered: javascript: var data = { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026f6742656f636b6e2c616d6f">[email protect ...

javascriptphpjsonajax

Having trouble with adding the copy to clipboard feature

I'm having trouble implementing a copy to clipboard option on my color selector. The goal is to display the selected color on an h3 tag and create a background color generator. Each time a color is chosen, it should appear on screen for us to easily c ...

javascripthtml

A guide to populating a table with JSON data that includes empty cells in AngularJS

I'm dealing with JSON data that includes employee names and salaries over multiple days (1-5). My goal is to display this information in an HTML table using AngularJS, mimicking the layout of the required table below. JSON Data: [{ name: "Jo ...

javascriptangularjsjson

Creating webpages dynamically by utilizing Javascript

I need assistance with a task involving a list of elements that allows users to print only the clicked element, rather than the entire page. The elements are structured as follows: <div class="element" id="#element1">Element 1</div> <div cl ...

javascriptjquerywordpressprinting

Moving a Node project to a different computer

I am looking to transfer my Angular project from a Windows machine to a Mac. I attempted to copy the folder and run npm install, but encountered an issue. Here is the error message I received: sh: /Users/pawelmeller/Documents/hotel/angular4/node_modules/ ...

javascriptangularjsnode.jsnpmdependencies

Issue with executing Mongoose's .save() method

I am facing an issue with a piece of code that is not functioning as expected. My goal is to save a user document after modifying it with an ObjectId by adding it to an array. However, the user.save() function does not seem to execute, as the document rema ...

javascriptnode.jsmongodbmongoose

The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below View Image I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5. <div class="container-fluid"> ...

htmlcssbootstrap-5

"How can I perform a expressjs database query based on a specific user's

app.get('/user/:id', function(req, res){ fetchData(req.params.id, res); }); function fetchData(id, res) { connection.query('SELECT * FROM data WHERE name = ?' , function(err, rows){ res.render('users', {users ...

javascriptmysqlnode.jsexpress

Content will be displayed below the background image

Help Needed: Content Going Over Background Image Hey there! I'm having a bit of trouble with my home page design. I have a full-width background image, but the content isn't displaying below it like I want it to. Instead, it's showing over ...

htmlcssflexbox

Enhance CKEditor with Linked Select Boxes Plugin

I have ventured into writing a CKEditor Plugin and have grasped the basic concepts. For instance: CKEDITOR.dialog.add( 'addDocumentGroupDialog', function ( editor ) { return { title: 'Link to a document group', min ...

javascriptjqueryjsonckeditor

Modifying placeholder text styling using jQuery for font and color changes

I have a form with an input field like this: <input type="text" name="firstname" id="firstname" placeholder="First name"> Initially, I am checking if the input field is empty using jQuery: $("#submitreg").click(function(e){ if ($.trim($("#fi ...

jqueryhtmlformsinput

Angular: Displaying Input Elements Based on Checkbox Status

I am trying to use Angular's ng-if directive to display an input element when a checkbox is checked. I also want to be able to display multiple input elements if multiple checkboxes are checked, as I need to enter the quantity for each item. However, ...

angular

Generate a library using Vue CLI from a component and then import it into your project

When using vue-cli to build my lib, I run the following command: "build": "vue-cli-service build --target lib --name myLib ./src/component.vue" After the build, how can I import my component from the dist folder? Importing from path-to-myLib/src/compone ...

javascriptvue.jsvuejs2vue-componentvue-cli

Update the delivery status of an Uber Eats order using the Uber Eats API

Hey there, I hope everyone is doing well. I need to update the delivery status of orders on Uber Eats through my app. I am in partnership with Uber Eats and using the Update Delivery Status API for this purpose. The API requires the scope eats.store.order ...

javascriptexpressuber-api

A straightforward Node.js function utilizing the `this` keyword

When running the code below in a Chrome window function test(){ console.log("function is " + this.test); } test(); The function test is added to the window object and displays as function is function test(){ console.log("function is " + this.tes ...

javascriptnode.jsv8

Two select boxes trigger multiple sorting operations

Struggling to implement 2 different sorting operations on two separate columns in a datagrid, using 2 different select boxes has proven to be challenging. I attempted the code below, but as a beginner, I was unable to solve it... In HTML: <select ng ...

javascriptangularjs

Return a string to the client from an express post route

I'm attempting to return a dynamically generated string back to the client from an Express post route. Within the backend, I've set up a post route: router.post('/', async (req, res) => { try { // Here, I perform computations on ...

javascriptexpressnodes

Angular 2 component downgrade issue: What causes the error when constructor parameters are involved? (SystemJS) Unable to resolve all parameters for (?)

Consider this line as an example: constructor(private elementRef: ElementRef, private zone: NgZone) {} In order for the downgrade to be successful without any errors, I must remove the parameters from the constructor. Otherwise, I encounter the follo ...

angulartypescriptangular2-zone

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Having difficulty resolving a typescript error related to batch.update in my code. const batch = db.batch(); const listingDoc = await db.collection("listings").doc(listingID).get(); const listingData = listingDoc.data( ...

javascriptreactjstypescriptgoogle-cloud-firestore