CODEWITHSUNDEEP
angularangular-materialangular-material2
Tomek
Tomek

Reputation: 79

how to set the width of angular material expand panel to fit the grid tile

I'd like to use Material's GridList component to make two column layout. Inside I've placed ExpandPanels, but they are centered in the tile. I need them to fit the horizontal space. Of course I could place a class attribute to the component and set the width, but I'm not sure if this is the best "material" way, to do this. Here my test example:

<mat-grid-list cols="2" ratio="2:1">
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true' >
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE
        </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-form-field>
         <input matInput placeholder="TEST">
       </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true'>
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE2
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-form-field>
        <input matInput placeholder="TEST">
      </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
</mat-grid-list>

I'm quite new to angular and material. I would be happy about some suggestions.

Upvotes: 6

Views: 21767

Answers (2)

Janith Udara
Janith Udara

Reputation: 685

I put the <mat-grid-tile> inside a <div class="tilefix"> and made a css class for the div giving following styles and it fixed the problem.

.tilefix{
    position: absolute;
    width: 100%;
    height: 100%; 
}

Below you can see it

<div class="tilefix">
      <mat-accordion multi="true" >
               <mat-expansion-panel  >
                     <mat-expansion-panel-header>
                          Header is here
                     </mat-expansion-panel-header>
                            <p>some text</p>
                </mat-expansion-panel>
                <mat-expansion-panel >
                   <mat-expansion-panel-header>
                          Header is here
                   </mat-expansion-panel-header>
                          <p>some text</p>
                   </mat-expansion-panel>                     
       </mat-accordion> 
 </div>

Upvotes: 1

Nenad Radak
Nenad Radak

Reputation: 3678

You can just target mat tag in your css file,i`m not sure that mat-expansion-panel contain predefined attribute to handle it. Just add

 mat-expansion-panel {
    width: 100%;
  }

Upvotes: 4

Related Questions