Angular: Ensuring Elements inside mat-stepper within mat-dialog Adjust to the Height of the Dialog

I am dealing with a mat-dialog that contains a mat-stepper. Within this stepper, there is a step that includes a form with various elements such as a list, mat-card, and table. I need these elements to always fill the height of the dialog. Specifically, I want the heights of the table and the list on the left side of the table to adjust according to the dialog's height. The mat-card, which appears when an item in the list is selected, should be positioned at the bottom left of the dialog. The list above it should either display all elements (with possible scroll bar) or show a scroll bar if there isn't enough space. Similarly, the table should show all elements if space allows or display a scroll bar. There should be no overflow requiring scrolling within the dialog.

A colleague tried using 

max-height: calc(90vh - <x>px)
but it didn't work well. How can I achieve this properly?

Here is a link to a stackblitz illustrating the issue: Stackblitz

If my question is unclear, please let me know so I can provide more detail.

cssangulartypescriptsassangular13

Answer №1

The issue at hand is rather straightforward - the dialog's content does not properly adjust to the height of the dialog window.

Each child element of the dialog, such as mat-dialog-content or mat-stepper, should be set to occupy the maximum height available (achieved through either height:100% or flex:1 within a flex container).

For a visual example, check out this link.

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

Creating a full-screen loading animation that appears when a button is clicked is a great way to enhance user experience. This animation can flow seamlessly from right to left before disappearing, providing a visually engaging transition for users as they

Despite anticipating more negative responses than positive ones, I believe that even one correct answer outweighs it all! So, I'm trying to figure out how to create a loading animation that covers the entire screen whenever a button on the navigation ...

javascripthtmlcssreactjsdom

Getting Specific Error Types in Angular 2 Form

My goal is to display the appropriate error message when a field is empty, too short, or too long. Here is a snippet of the form I am working with: <form #applicationForm="ngForm" (ngSubmit)="saveApplication()" class="form-horizontal"> <div ...

formsangular

Incorrect measurement of text size

My attempt at creating a basic font size changer was working perfectly until I integrated it with the bootstrap framework. Strangely, when I try to increase the font size, it actually decreases instead. var baseFontSize; (function () { "use strict"; ...

javascriptjquerycss

Avoid Inferring as a Union Type

I am currently working on implementing a compact type-safe coordinate management system in TypeScript. It revolves around defining the origin of the coordinate as a type parameter, with functions that only accept one specific origin type. Below is a short ...

typescript

The img markup results in a 406 error (Not Acceptable) when trying to serve images

I am attempting to retrieve images from Symfony. /** * @Route("/provide/image/{filename}") */ public function provideImage($filename) { $path = 'myimgdir/' . $filename; $response = new BinaryFileResponse($path); return $response ...

angularimagesymfonyhttp-status-code-406

How can I select just one element to be impacted by a click event when using map in TypeScript?

Currently, I'm facing an issue where I want to change the icon of a button when it's selected. The problem is that using map affects all buttons even if only one is selected. // ... const [clicked, setClicked] = useState(false); <Button sta ...

reactjstypescript

To retrieve JSON objects depending on today's date

My data is stored in a JSON file named tasks. The structure of this template can be visualized as follows: https://i.sstatic.net/MCSit.png Data Structure of JSON File [ { "taskName": "Task - 1", "id": "01", "startDate": "2019-04-17T18:30:0 ...

angulartypescriptangular6

Issue with image slider loop functionality not functioning properly

Looking to incorporate this image slider into my website: http://codepen.io/rslglover/pen/DBvoA The slider functions properly, but it halts after completing its cycle. I'm unsure of what distinguishes the CodePen code from mine. How can I replicate t ...

htmlcss

Insert the URL into either a div or an iframe

It seems like a common issue. I've come across multiple solutions for this problem. using jquery load using iframe I attempted both methods but encountered difficulties in loading content. Specifically, I tried to load google.com and it didn't ...

javascriptjqueryhtmlcss

Send the index of the row to the event handler in the table of data

I am currently utilizing a data table component from PrimeNG and have the following template code: <p-column [style]="{'width':'40px'}"> <template let-col let-rowData="rowData" let-rowIndex="rowIndex" pTemplate type="body" ...

angularprimeng

Unable to create a responsive design for this box

I've been attempting to place text and a button inside a box, but I'm encountering issues with fitting them on medium and small screens. So far, the methods I've tried have not been successful. Below is the code I am currently using: * { ...

htmlcssresponsive-designbootstrap-4

What is the best way to eliminate square brackets from keys within an array of objects in TypeScript?

I am currently working on a task to eliminate all square brackets from the keys in the entries field within an array of objects: data: [ {title: "Title1", entries: { 'Entry1': 333333, '[ABC]Entry2': 1234, 'Entry3' ...

typescript

What is the reason behind material-ui's decision to invoke their dialogs twice?

After attempting to implement a modal and realizing the strange behavior, I switched to using a dialog instead. To my surprise, the issue persisted. This is how I approached it: import Dialog, { DialogProps } from '@material-ui/core/Dialog'; imp ...

javascriptreactjstypescriptecmascript-6material-ui

Tips for upgrading Angular without updating Angular CLI

I'm currently facing challenges with installing the correct version of Angular. I keep encountering errors such as This version of CLI is only compatible with Angular versions ^11.0.0-next || >=11.0.0 <12.0.0, but Angular version 9.1.1 was found ...

angulartypescriptangular-cli

Comparing Input and Output Event Binding

Can you provide reasons why using @Output for events is more advantageous than passing an @Input function in Angular 2+? Utilizing @Input: Parent Template: <my-component [customEventFunction]=myFunction></my-component> Inside parent-compone ...

angulartypescriptangular2-componentsangular5typescript-decorator

Different ways to adjust the positioning of the HTML canvas created using p5.js

I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...

javascripthtmlcssp5.js

What is the process for translating the aria-label to "Open calendar" in a different language for the angular md-datepicker icon?

Check out my latest demo on using the angular md-datepicker Looking to customize or translate the aria-label text for the icon in the angular md-datepicker, as shown in the image below. ...

angularangular-material

Is it possible to retrieve the original array after removing filters in Angular?

Within my component, I have an array that I am filtering based on a search string. The filtering works as expected when the user inputs characters into the search field. However, I am encountering an issue when attempting to display all records again after ...

javascriptangulartypescript

angular 6 personalized material icons with ligature assistance

Can I create my own custom material icons with ligature support? Currently, I use svgIcon to get Custom Icons, Is there a way to make custom icons that support ligatures? Here is my current code snippet: app.component.ts import { Component } from &ap ...

angulartypescriptangular6google-material-iconsligature

Problem with Anular5 - "this" not functioning correctly inside of ready()

I am encountering an issue in graph.component.ts this.cContainer = cytoscape ( { ready: function(e) { this._dataService.setResultData(); } }); However, I am getting the following error message: ERROR TypeError: Cannot read property &ap ...

angulartypescriptcallback