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

user_5989925 0
Viewed 16118

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.

angular-material2 angular-material angular
2 Answers

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%;
  }
user_97985680

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>
user_78656210
Related