Flex Row with Expansion Panel spacing concern

Experiencing issues with spacing of expansion panels within a flex row.

Multiple Mat-Expansion-Panel are inside an ngFor loop, each containing varying amounts of items.

When one panel is expanded, the adjacent panel also expands to the same height without displaying its items.

I have provided a stackblitz example for reference: https://stackblitz.com/edit/mat-expansion-panel-x8qz9z

Considering that my panellist component is used multiple times with different layouts, should I create two separate columns within the *ngFor in order to resolve this issue?

Edit1: Attempted using height:max-content on the mat-expansion-panel, but then panel 3 does not move up under panel one.

The problem persists when applying align-items:baseline; on the container as well.

Regards,

cssangularflexboxangular-material

Answer №1

To achieve this layout, it is necessary to use 2 separate columns. You can divide your array into two columns, or as many as needed, by following this approach:

columns = [
  this.panels.slice(0, Math.ceil(this.panels.length / 2)),
  this.panels.slice(Math.ceil(this.panels.length / 2))
];

Once you have the columns array, you can utilize it in your template like so:

<div class="panel-container">
  <div class="panel-column" *ngFor="let columnPanels of columns">
    <mat-expansion-panel class="panel" *ngFor="let panel of columnPanels">
      <mat-expansion-panel-header>
        {{panel.name}}
      </mat-expansion-panel-header>

      <div *ngFor="let item of panel.items">{{item}}</div>
    </mat-expansion-panel>
  </div>
</div>

Don't forget to update your CSS as well:

.panel-container {
  display:flex;
  flex-direction:row;
}

.panel-column {
  flex: 1;
}

.panel {
  margin: 10px;
  height: max-content;
}

Check out the code sample 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

Angular: Intercepting an HttpResponse to trigger additional calls before passing the response back to the caller

My current objective is to intercept a response and, if a certain value (CHALLENGE) is present, trigger a call to another API. I need to retry this process 3 times if necessary. Upon success, I should respond to the initial call and pass the result back to ...

angularrxjsobservablerxjs5

Growing animated backdrop

My website layout consists of a centralized wrapper div containing a header, three columns with dynamic heights based on content length, and a footer. I now want to enhance the design by adding background colors that expand in width to the left and right. ...

htmlcssdynamic

Menu disappears below the screen

I am experiencing an issue with my dropdown menu. I am having trouble figuring out how to adjust the position of the dropdown that appears when hovering over the "support" button. I would like to move it slightly to the left as half of it is extending off ...

htmlcssdrop-down-menustyling

Tips for utilizing both the Element Selector and Class Selector in Jquery

I am working with a simple table that has TDs assigned either the 'PLUS' or 'MINUS' class. My goal is to use jQuery to implement functionality for collapsing all or expanding all. When the Expand All button is clicked, I need to chang ...

javascriptjquerycssjquery-selectors

Guide to positioning Navigation Bar in the center

I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve. The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on t ...

htmlcss

Hovering over a dropdown menu results in the color not completely filling the background of the desired element

.nav-main { background-color:#09F; width:100%; height:100px; color:#FFF; line-height:40px; } .nav-main .logo{ float:left; padding: 40px 5px; font-size:1.4em; line-height: 20px; } .nav-main > ul { margin:0; ...

csshoverbackground-color

Avoid changing the button color to a lighter shade when it is clicked

Is there a way to prevent button text from changing to a lighter color after clicking? I am facing an issue where the button I set to red turns slightly whiteish after it is clicked. How can I ensure that the button stays red at all times? Header Toolbar ...

htmlcssangularionic-frameworkionic5

Struggling to achieve the desired vertical text alignment in a React Native layout

I am in need of assistance with a follow-up question related to my issue. I have a specific layout that I would like to use as a component, but I am struggling to make it more square-shaped using CSS in React Native. Can someone provide guidance on how to ...

cssreactjsreact-nativelayout

Run the code before the http observable initiates the network request

Is there a way to write code that executes before an Angular HTTP client observable makes a network call, but after the function is called? The following code snippet shows an example of an Angular HTTP service call: this.geocodeApi.getAddressSuggestions( ...

angularangular2-observablesangular-httpclient

Step-by-step guide to creating a dropdown menu within a form element, with a variety of selectable values generated in

I am dealing with an array of employees who are assigned tests by a Lead. When tests are being assigned, the selected employee is allocated correctly. Upon review, the Lead can easily see which test is assigned to each employee. However, when the table is ...

htmlangular

Angular: Changing the class of a parent element dynamically while iterating through a list with ngFor

I have a unique challenge where I am trying to style a checkbox as a button by placing it inside its label. <label> <input type="checkbox" name="..."> </label> My goal is to toggle the parent label's class based on whether the che ...

angularngforng-class

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

javascriptjquerycssjquery-animatecss-transforms

Sass flex order has no effect on elements that are generated

I encountered an issue with the rendering of SVGs in my project. Currently, they are displayed correctly in desktop mode, but in mobile portrait mode, I need to change the order of one specific SVG element within the row. To achieve this, I decided to use ...

cssreactjssvgsassflexbox

Making a readonly input appear like a div using css

Is there a way to style a readonly input to look like a block level element while maintaining its automatic width adjustment? Setting the width to 100% is not the desired solution. Here is the CSS code that I have tried: input:read-only, textarea:read-on ...

htmlcss

Acknowledgment Pop-up

When using the PrimeNG table with a custom modal component that I created, I encountered an issue. The edit functionality works correctly and retrieves the correct row id, however, the delete function always returns the id of the first row. dashboard.html ...

angulartypescriptprimeng

Vertical tabs in Bootstrap display content when hovered over

I have implemented some tabs using Bootstrap and I want to show these tabs when hovering over them. Here is the link to view the tabs: https://jsfiddle.net/uzfxmrs3/ Below is the HTML code for the tabs: <div class="d-flex align-items-start respon ...

htmljquerycsstwitter-bootstrapbootstrap-5

Can you provide a tutorial on creating a unique animation using jQuery and intervals to adjust background position?

I am attempting to create a simple animation by shifting the background position (frames) of the image which serves as the background for my div. Utilizing Jquery, I aim to animate this effect. The background image consists of 6 frames, with the first fr ...

javascriptjquerycsssetinterval

Guide on implementing SAML authentication in an Angular 8 application

Searching for a way to integrate SAML based authentication into Angular 8, inspired by a successful implementation in C#. Reference link: https://github.com/jitbit/AspNetSaml The process involves redirection to the Identity provider URL to obtain the SAM ...

angularauthenticationsingle-sign-onsamlangular8

nginx serves index.html content for all Angular files, including scripts and other assets

I have encountered an issue with my Angular (v9) application deployed as a Docker image with nginx on Kubernetes. The problem is that every request, including the root application and its javascript files, returns the content of the index.html file instead ...

angularnginx

Creating a unique Web Component that spans the full height of the page

I created a Web Component with Vue.js and vue-custom-element. I now want my my-chat and my-whiteboard Web Components to have a height of 100%. Here's how I'm using the component: // App.vue <template> <splitpanes class="default-theme" ...

javascriptcssvue.jsheightweb-component