Ensuring the same height for two p-cards in PrimeNG

I am facing an issue with ensuring both p-card elements have the same height, where the smaller one aligns to the height of the bigger one.

https://i.sstatic.net/Mfnlr.png

Is there a way to achieve this using the code below:

parent.component.html

<div class="container">
  <div class="row">
    <div class="col-6">
      <homepage-card header_name="XX"></homepage-card>
    </div>
    <div class="col-6">
      <homepage-card header_name="YY"></homepage-card>
    </div>
  </div>
</div>

homepage-card.component.html

<p-card>
  <ng-template pTemplate="header">
    <div class="header_style">
      {{ header_name }}
    </div>
  </ng-template>
  <div *ngIf="header_name == 'XX'; else yy_template">
    <progress-comp class="prog_bar" *ngFor="let item of import_name_xx" [item]="item"></progress-comp>
  </div>
  <ng-template #yy_template>
    <progress-comp class="prog_bar" *ngFor="let item of import_name_yy" [item]="item"></progress-comp>
  </ng-template>
  <ng-template pTemplate="footer">
    <p-button icon="pi pi-angle-double-down" label="Do"></p-button>
  </ng-template>
</p-card>

Answer №1

To ensure both cards are properly displayed within your row container, give this div a minimum height. Additionally, create another div around your p-card and set its height to 100%.


    <div class="container">
      <div class="row" style="min-height: 20vh">
        <div class="col-6">
          <homepage-card header_name="XX"></homepage-card>
        </div>
        <div class="col-6">
          <homepage-card header_name="YY"></homepage-card>
        </div>
      </div>
    </div>

    <div style="height: 100%">
      <p-card ...
      </p-card>
    </div>

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

What is the best way to ensure that my image completely occupies the div?

I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space. Check out the CSS and HTML code snippet here. div.hero{ ...

Determining the height of a different element using only CSS, Stylus, or Nib

Looking to create a navigation bar using CSS Markup: <nav> Navigation content </nav> <div id="mainContent"> Main page content </div> CSS: nav { position:fixed; height: X%; min-height: Ypx; } #mainContent { ...

Unable to execute xmlHttp.responseXML on a server that is offline

Currently, I am diving into the world of AJAX and XML. However, I recently encountered a frustrating issue. I attempted to create a basic program that would display everything I input into an input box within a <div>. Strangely enough, my program fa ...

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...

Stop Bootstrap from impacting a specific division on my webpage

Is there a way to stop Bootstrap from impacting a specific div and its nested divs in my HTML document? Since adding Bootstrap, the images inside this particular div have turned dull and acquired an undesirable blue tint. Thank you for considering my conce ...

Utilizing Fancybox with a polymer paper-card: A step-by-step guide

I have a collection of paper-cards and I am looking for guidance on integrating the fancybox library to display the content of each paper-card. Here is a sample of a paper-card: <paper-card heading="Emmental" image="http://placehold.it/350x150/FF ...

Transmitting intricate Objects to Angular Directive

I am facing an issue where I need to pass a complex object to my directive. The object is a different formControl so I cannot use [formControl], formControlName, etc. <input matInput appDateInputEvents [control]=”fieldGroup.get(‘date’)”> Thi ...

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

Choose an element from within a variable that holds HTML code

I have a specific div element that I need to select and transfer to a new HTML file in order to convert it into a PDF. The issue I'm facing is related to using AJAX in my code, which includes various tabs as part of a management system. Just to prov ...

The firebase.d.ts on iOS functions properly, whereas on Android, it becomes

Currently, I am working with Ionic 2 on my Mac system. Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 1.0.0 ios-deploy version: Not instal ...

Utilize PHP to import data from a CSV file into a MySQL table

Currently, I am attempting to upload data to my table by importing a CSV file to my PHP page. The code I am using for this task is sourced from EggSlab <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "Test"; // Establ ...

What is the best way to display time in EJS?

Currently facing an issue with formatting a time retrieved from the database. The value is strictly a time and not associated with any date. I've attempted to use getHours and getMinutes in EJS, but they don't seem to be functioning as expected. ...

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

The checkbox is not updating as anticipated

I'm currently developing a basic widget that allows the user to change the value of either the check box OR the entire div by selecting them. Below is the code I have implemented: $(document).ready(function() { $(document).on("click", ".inputChec ...

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

I'm currently working on capturing the event triggered when the mouse hovers over a select box, regardless of whether it's collapsed or expanded. My approach involves using .on() in the following manner: $(document).on('hover', "select ...

Utilize a function from a separate JavaScript file by calling it within the $(document).ready(function()

Refer to this post for more information: Click here I attempted to access a function that was defined in another .js file based on the instructions from the post. However, I encountered an issue. Take a look at my code below: sildemenu.js $(document).re ...

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

I've been attempting to transform a collection of 4 divs in HTML into an array, but all my efforts seem to lead to the array becoming void. <div class="container"> <div class="shape" id="one"></div> <div class="sh ...

When setting up Angular material, be prepared for a thorough audit uncovering nearly 600 vulnerabilities

I want to utilize the drag and drop features provided by the @angular/material module, however, when I install it using angular cli, multiple vulnerabilities are flagged during the audit process. While the program functions as expected, attempting to run n ...