What is the best method to adjust the width of the PrimeNG ConfirmDialog widget from a logic perspective

Currently utilizing "primeng": "^11.2.0" and implementing the ConfirmDialog code below

  this.confirm.confirm({
      header: 'Announcement',
      message: this.userCompany.announcement.promptMsg,
      acceptLabel: this.userCompany.announcement.labelOK? this.userCompany.announcement.labelOK:'OK',
      rejectLabel: this.userCompany.announcement.labelDoNotShowAgain? this.userCompany.announcement.labelDoNotShowAgain:'Do not show again',
      accept: () => {
        console.log('accepted')
      },
      reject: () => {
        console.log('rejected')
      }
    });

The resulting layout on mobile appears non-responsive and unfriendly. https://i.stack.imgur.com/HtRol.png

Upon referring to the official documentation, it seems that there is a 'style' property available. When attempting to include 'style' in the code, an error occurred.

   this.confirm.confirm({
      header: 'Announcement',
      message: this.userCompany.announcement.promptMsg,
      style: {width: '50vw'},
      acceptLabel: this.userCompany.announcement.labelOK ? this.userCompany.announcement.labelOK : 'OK',
      rejectLabel: this.userCompany.announcement.labelDoNotShowAgain ? this.userCompany.announcement.labelDoNotShowAgain : 'Do not show again',
      accept: () => {
        console.log('accepted')
      },
      reject: () => {
        console.log('rejected')
      }
    });

Error

error TS2345: Argument of type '{ header: string; message: any; style: { width: string; }; acceptLabel: any; rejectLabel: any; accept: () => void; reject: () => void; }' is not assignable to parameter of type 'Confirmation'.
  Object literal may only specify known properties, and 'style' does not exist in type 'Confirmation'.
    
    117       style: {width: '50vw'},

Looking for ways to enhance the appearance of the confirmDialog box on mobile devices through styling adjustments in the logic rather than the template file.

Your assistance is greatly appreciated.

angulartypescriptprimeng

Answer №1

It seems that the style attribute is not supported in the confirm() method, as indicated by the source code. This discrepancy suggests that the documentation may be incorrect. The correct approach would be to utilize the style attribute within the template only.

<p-confirmDialog [style]="{width: '50vw'}" ></p-confirmDialog>

The use of the style attribute is demonstrated in the ConfirmDialog source code.

If you prefer to set the style in the component class, you can achieve this with the following steps.

component.ts

styleValue={width: '50vw'};

component.html

<p-confirmDialog [style]="styleValue" ></p-confirmDialog>

Implementing logic for "Close" and "Reject" (as requested in the comments)

component.html

<p-confirmDialog #cd>
    <p-footer>
        <button type="button" pButton icon="pi pi-times" label="No" (click)="no()"></button>
        <button type="button" pButton icon="pi pi-check" label="Yes" (click)="yes()"></button>
    </p-footer>
</p-confirmDialog>

component.ts

no() {
  // Handle logic for no, then close
  cd.reject();
}
yes() {
  // Handle logic for yes, then close
  cd.accept();
}

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

Is there a way to effectively sort through Firebase database entries using Angular based on checkbox selection?

I am working on an event page where all events are displayed with a category field. This is how my database structure looks: category: - categoryName events: - eventName - category.id (stores the category id) My goal is to initially display all eve ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

Comparing Angular 2 Components and AngularJS Directives: What Sets

Are there any parallels or distinctions between an angular2 component and an AngularJS directive? It seems that these two share similar functionalities in the angular2 component and AngularJS directive. Additionally, angular2 also incorporates a directive ...

angularjsangular

Using Jest and TypeScript to mock the return value of react-oidc-context

For our project, we utilize react-oidc-context to handle user authentication using oidc-client-ts under the hood. The useAuth function provided by react-oidc-context gives us access to important information such as isAuthenticated, isLoading, and the auth ...

typescriptjestjsreact-oidc-contextoidc-client-ts

Please refresh the page to view the updated component

Within my Angular 7 application, I have various components that retrieve data from an API by making a call in the ngOnInit function. So far, the CRUD operations are functioning correctly and I am able to obtain the desired results. However, the main issue ...

angular

Angular 2 select does not recognize the selected option

In my Angular 2 code, I am using ngFor to populate a dropdown with options. I want a specific option at a certain index to be selected by default. Currently, I tried using [attr.selected]="i == 0" but it ends up selecting the last option instead of the fi ...

angulartypescriptangular2-template

Access to Angular CORS request has been blocked

I'm currently working on establishing a connection between my Angular application and a basic REST server using express. The server responds to requests with JSON data exclusively. To enable CORS support, I've integrated the cors module from npm ...

angularexpresscors

Pulling the month name based on a specific year and week using Javascript

In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...

javascriptangulartypescriptangular8

Unique styling implementation for element situated underneath Angular 6 router-outlet

I'm currently working on implementing router transitions in my Angular application, and I've encountered an unusual problem. The styling for the router-outlet element is being applied to the element that comes after it in the DOM hierarchy. Here ...

htmlangularsassangular-animations

Unable to set value using React Hook Form for Material-UI Autocomplete is not functioning

Currently, I am in the process of constructing a form using React-Hook-Form paired with Material-UI. To ensure seamless integration, each Material-UI form component is encapsulated within a react-hook-form Controller component. One interesting feature I a ...

reactjstypescriptmaterial-uireact-hook-form

Unable to execute functions on observable outcomes

Let's discuss an interface called Vehicle, a class named Car that implements it, and a method within the class titled isColorRed: export interface Vehicle{ color : string; } export class Car implements Vehicle{ color : string; constructo ...

angulartypescripthttprxjstypeerror

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

For instance: class Parent { constructor() {} } class Child { constructor() { super(); someChildCode(); } } I need to run some additional code after the execution of someChildCode(). Although I could insert it directly there, the requirement is not to ...

javascripttypescriptecmascript-6

The error message "unsupported_grant_type" was encountered while using the Django OAuth2 server

Having trouble getting django to accept my POST request for an access token. Despite having the correct parameters and authorization code, I keep receiving an error after sending the follow-up POST request. According to what I've read, the content-ty ...

djangoangularoauth-2.0

Creating a searchable and filterable singleSelect column in the MUI DataGrid: A step-by-step guide

After three days of working on this, I feel like I'm going in circles. My current task involves fetching data from two API sources (json files) using the useEffect hook and storing them in an array. This array contains a large number of products and a ...

javascriptreactjstypescriptdatagridmui-x-data-grid

Access the array values by their respective keys in an object that is returned from a custom JavaScript file utilizing the Node.js file system

I recently came across a config file with a unique format, as shown below: define([], function () { return { productItems: { item1: ['Apple', 'Ball', 'Car'], item2: [&apo ...

javascriptnode.jsarraystypescriptjavascript-objects

How can I implement a recursive nested template call in Angular 2?

Hopefully the title isn't too misleading, but here's my dilemma: I am in the process of building an Angular 2 app and utilizing nested templates in multiple instances. The problem I am facing involves "widgets" within my app that can contain oth ...

htmltemplatestypescriptangularangular-directive

Preventing long int types from being stored as strings in IndexedDB

The behavior of IndexedDB is causing some unexpected results. When attempting to store a long integer number, it is being stored as a string. This can cause issues with indexing and sorting the data. For instance: const data: { id: string, dateCreated ...

javascripttypescriptindexeddb

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

Implementing the Pondjs library into my project seemed straightforward at first: meteor npm install --save pondjs However, I'm encountering difficulties when trying to integrate it with my Typescript files. The documentation suggests: In order ...

javascriptmeteortypescriptnpmangular2-meteor

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

htmlcssangularmaterial-designangular-material2

Issue with border radius in MUI 5 affecting table body and footer elements

Currently, I am diving into a new project utilizing React version 18.2 and MUI 5.10.3 library. My main task involves designing a table with specific styles within one of the components. The table header should not display any border lines. The table body ...

cssreactjstypescripthtml-tablematerial-ui

Present information in a tabular format upon identifying an individual's ID using Angular

I encountered a specific issue recently. I successfully connected an API to my database using Angular, and it functions well by displaying all the data in a table. However, when I try to retrieve data for a single ID, the result can only be seen in an inpu ...

angular