Search code examples
htmlcssangularangular-materialangular-material-stepper

display inline blocks do not remain aligned in matterial stepper header

I have issues keeping an image and a div containing text to stay aligned correctly.

If the screen is big, all elements are correctly aligned yet if the screen is too small ( cellphone sized screens for instance ) the image gets pushed upwards such as shown here :

enter image description here

This is the wished result ( such as displayed on big screens )

enter image description here

My code is as follows ( HTML ) :

      <ng-template matStepLabel>
        <img class="img-logo inline vertical-align" src="{{experience.logoPath}}"/>
        <div class="label-text inline vertical-align">
          <h6 class="inline no-margin">{{experience.type}} - {{experience.title}}</h6>
          <br />
          <span class="italic-text inline">
            <span [innerHTML]="experience.dateStart.replace('/', ' / ')"></span> - <span [innerHTML]="experience.dateEnd.replace('/', ' / ')"></span>
            <div class="spacer"></div>
            <span class="dot"></span>
            <div class="spacer"></div>
            <span [innerHTML]="this.getDuration(experience.dateStart, experience.dateEnd)"></span>
          </span>
        </div>
      </ng-template>

And here is the CSS :

.mat-step-label.mat-step-label {
  text-overflow: inherit;
  white-space: normal;
}

.label-text {
  position: relative;
}

.img-logo {
  max-height: 40px;
  max-width: 40px;
  top: 0;
  vertical-align: bottom;
  padding-right: 6px;
}

.spacer {
  padding: 3px;
  display: inline;
}

.vertical-align {
  vertical-align: middle;
}

.inline {
  display: inline-block;
}

.no-margin {
  margin: 0;
}

.buffer {
  padding-top: 40px;
}

How can I get the logo to stay aligned on small screens ?

Solution

  • You have to use Flexbox for this. See this repro on Stackblitz, and here is the code just in case :

    .html:

    <ng-template matStepLabel>
  <div class="flex-container">
    <img src="https://picsum.photos/200/300" />
    <div>
      <div>
        qsdzefruh iuhsedqfiuohef sqedpifuhef zsqiedpoufhqszef piqsuedhfp
        iuhqsdiouyfh
      </div>
      <i>some date - some date - some date</i>
    </div>
  </div>
</ng-template>

    .css:

    img {
  width: 48px;
  height: 48px;
}

.flex-container{
  display: flex;
  align-items: center;
}

::ng-deep .mat-step-label.mat-step-label {
  text-overflow: inherit;
  white-space: normal;
}

    Note that the .mat-step-label seems to have a max-height, so if your label take more than 3 or 4 lines (which I don't think will happens) it will overflow and be partially hidden, your call to handle that depending on what you display.

    REALLY hope it helps, since it took me like few hours to see I didn't use ng-deep... don't forget it if you are putting your css in your component. Else you can put it in the main file style.scss file to make it global (You wont need ng-deep if you do that).