CSS display Angular expansion panel element in one line

Question

I am using Angular <mat-expansion-panel> in my project.

I am unable to display Frate, Kunda and date and its value on one line.

I have tried using various css properties such as white-space: nowrap; but none of them are working for me

Working Demo - https://stackblitz.com/edit/mat-expansion-panel-en61pv?file=app%2Fexpansion-overview-example.html

.html


<div class="row">
  <div class="col-sm-7">
    <dl class="row property_set">
      <mat-accordion style="width:50%">
        <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <dt class="col-sm-4 record_property">Term</dt>
            </mat-panel-title>
            <mat-panel-description>
              <dd class="col-sm-8 record_property_value term_name">

                <span >
              {{name1}}
            </span>
              </dd>
            </mat-panel-description>
          </mat-expansion-panel-header>

          <dt class="col-sm-4 record_property">Frate</dt>
          <dd class="col-sm-8 record_property_value" data-property-type="select">{{id}}</dd>

          <dt class="col-sm-4 record_property">Kunda</dt>
          <dd class="col-sm-8 record_property_value" data-property-type="select">

            <span>{{text1}}</span>
          </dd>

          <dt class="col-sm-4 record_property">Date</dt>
          <dd class="col-sm-8 record_property_value">{{date}}</dd>
        </mat-expansion-panel>
      </mat-accordion>
    </dl>
  </div>
</div>

.ts file

export class AppComponent {
   term: string = 'This is term'
  name1: string = 'This is name'
  id: string = 'This is id'
  text: string = 'This is text'
  text1: string = 'This is term1'
  date: string = 'This is date'
  panelOpenState = false;
}

try adding `display:inline-flex` in `dd` and `dt` as default style for `dd` and `dt` is `display:block;` — thelovekesh, Apr 28 '21 at 04:07
I tried adding `display: inline-flex` to both ```dd and dt```. That did not work — DON DAN, Apr 28 '21 at 18:18

Mir entafaz Ali · Accepted Answer · 2021-04-28T18:23:12.407

2

::ng-deep .property_set .mat-expansion-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Add it in your css file. It should work.

edited Apr 28 '21 at 18:23

answered Apr 28 '21 at 04:09

Mir entafaz Ali

927
6
13

Thanks for reply, this seems to be working fine on your side but not in my project. Can you please check this - https://stackblitz.com/edit/mat-expansion-panel-en61pv?file=app%2Fexpansion-overview-example.html – DON DAN Apr 28 '21 at 18:15
I can see your content has updated now. Updated your [Stackblitz Demo](https://stackblitz.com/edit/mat-expansion-panel-zmnsfy?file=app/expansion-overview-example.css) check once please – Mir entafaz Ali Apr 28 '21 at 18:21
Thank you, adding these css helped the issue , but it is `not aligned with This is name`. Can you help me what changes should I make to make them align? – DON DAN Apr 28 '21 at 18:26
I fixed the issue based upon the question you asked in here. To solve the issue you're talking about need some time. We might have to change the HTML structure but I don't think you would want that. Meantime you could try using padding and removing the margin in your second column. – Mir entafaz Ali Apr 28 '21 at 18:35

CSS display Angular expansion panel element in one line

1 Answers1