Styling an angular material contact form using md-list-item

Question

I am trying to create a contact info form which should resemble the following picture however I am facing some difficulties:

For doing so I came up with the following:

     <div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
  <div flex-gt-sm="50">
    <md-card>
      <md-list>
        <md-list-item>
          <div class="md-list-item-text">

            Name

          </div>

          <div>
            <p>
              <strong>John Smith</strong>
            </p>
          </div>

          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>

        <md-list-item>
          <div class="md-list-item-text">
            <p>
              Email
            </p>
          </div>

          <div>
            <p>
              <strong>test@test.com</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>

        <md-list-item (click)="doNothing()">
          <div class="md-list-item-text">
            <p>
              Phone
            </p>
          </div>

          <div>
            <p>
              <strong>0123456789</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>

        <md-list-item>
          <div class="md-list-item-text">
            <p>
              Birhtday
            </p>
          </div>

          <div>
            <p>
              <strong>10-10-1980</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>
        <md-list-item>
          <div class="md-list-item-text">
            <p>
              Gender
            </p>
          </div>

          <div>
            <p>
              <strong>Male</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>
      </md-list>
    </md-card>
  </div>
</div>

Above looks like the following:

1. How would I divide my list item similar to the first picture into 3 so name appears in the left, data appears in the the middle and the next arrow icon on the right?
2. How would I position this in the centre of the screen rather than left?
3. When I hover over the md-icons its background becomes grey. How would I keep the white background and not change it?
4. How do you increase the height of the md-list-item similar to the initial form?

For your information this is an Angular 4 project and I use the following packages:

  "dependencies": {
    "@angular/animations": "^4.2.0",
    "@angular/common": "^4.2.0",
    "@angular/compiler": "^4.2.0",
    "@angular/core": "^4.2.0",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.2.0",
    "@angular/http": "^4.2.0",
    "@angular/material": "2.0.0-beta.6",
    "@angular/platform-browser": "^4.2.0",
    "@angular/platform-browser-dynamic": "^4.2.0",
    "@angular/platform-server": "^4.2.0",
    "@angular/router": "^4.2.0",
    "@covalent/core": "1.0.0-beta.5",
    "@covalent/dynamic-forms": "1.0.0-beta.5",
    "@covalent/highlight": "1.0.0-beta.5",
    "@covalent/http": "1.0.0-beta.5",
    "@covalent/markdown": "1.0.0-beta.5",
    "@ngx-translate/core": "^7.1.0",
    "@ngx-translate/http-loader": "^0.1.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "ionicons": "^3.0.0",
    "moment": "^2.18.1",
    "ng2-charts": "^1.6.0",
    "ng2-datetime-picker": "^0.15.1",
    "ng2-file-upload": "^1.2.1",
    "oidc-client": "^1.3.0",
    "rxjs": "^5.4.2",
    "showdown": "^1.7.1",
    "zone.js": "^0.8.16"
  },

Update 1:

Right now the the output takes the entire width of the screen similar to below but I want it to appear as a fixed size box at top centre of the screen:

Answer 1

1. Use fxLayout="row" inside <md-list-item > and split the 3 items width using fxFlex.

2. Use fxLayoutAlign=" center" inside <md-list-item>.

3. If you don't want button effect, don't use button at all. I replaced it with span and added a class to make the cursor pointer which will give a hover effect to the span.

4. md-list-item {min-height: 70px !important;}

Full html:

<div class="big-box"> 
  <span><h1>This is a test for the width of the big Box</h1></span>
  <div flex-gt-sm="50">
    <md-card style="padding-left: 0; padding-right: 0">
      <md-list>

        <md-list-item   fxLayout="row" fxLayoutAlign=" center">

          <span fxFlex="35" class="md-list-item-text">Name</span>

          <span fxFlex="55">
              <strong>John Smith</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Email</span>

          <span fxFlex="55">
              <strong>test@test.com</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" (click)="doNothing()" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Phone</span>

          <span fxFlex="55">
              <strong>0123456789</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Birthday</span>

          <span fxFlex="55">
              <strong>10-10-1980</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>
        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Gender</span>

          <span fxFlex="55">
              <strong>Male</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

      </md-list>

    </md-card>

  </div>

</div>

css:

md-card {
  padding: 0 0 0 0;

}

md-list-item {
    min-height: 70px !important;

}

::ng-deep .mat-list .mat-list-item .mat-list-item-content, .mat-nav-list .mat-list-item .mat-list-item-content {
    width: 99vw;
}

.nav-button{
  cursor: pointer;
}

.big-box{
  width: 70%;
  margin: 0 auto;
}

Plunker demo