CODEWITHSUNDEEP
cssangular
VictorNorman
VictorNorman

Reputation: 165

Angular Material Design card: how to fix alignment?

I am creating a small component that contains a card which shows a question and lets the user select a value from a slider.

The HTML is:

<mat-card class="survey-card">
  <mat-card-header>
    <mat-icon>question_answer</mat-icon>
    <mat-card-title>
      {{question}}
    </mat-card-title>
    <mat-card-subtitle>
      Choose your best answer.
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-slider class="survey-slider" thumbLabel [min]="minValue" [max]="maxValue" (change)="sliderChanged($event)">
    </mat-slider>
  </mat-card-content>
</mat-card>

What I want is for the icon to be in the upper-right corner. However, its location now is dependent on the length of text in the question.

Here is an image where I show 3 of these components, with different length questions:

enter image description here

My SCSS is

* {
  border: 1px solid black;
}
.survey-card {
  border: 1px solid steelblue;
  border-radius: 10px;
  max-width: 20vw;
  margin: 1vw;
}

// Force icon to be in the upper-right corner.  Not a great solution, but seems to work.
.mat-icon {
  margin-left: 40px;
}

.mat-slider-horizontal {
  min-width: 100%;
}

Note that the code to "force the icon" into the upper right does not really work. The <mat-icon> and <mat-card-title> are in a flexbox, so I've tried to put flex-grow: 1 on the children of the mat-card-header using mat-card-header > * { flex-grow: 1 } but that doesn't seem to work -- the icon fills the area horizontally but is aligned to the left part of its area.

Any help would be appreciated! I'm sure it is just one tiny thing I'm missing.

Upvotes: 1

Views: 1195

Answers (1)

Roy
Roy

Reputation: 8079

You have to adjust the margin-left to margin-left: auto to make it work. margin-left: auto will try to put the element itself to the far most right corner of its container.

Alignment and auto margins
By setting a margin of auto on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with Flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space.

Read more about box alignment in Flexbox on MDN.

Your CSS will look like this:

* {
  border: 1px solid black;
}
.survey-card {
  border: 1px solid steelblue;
  border-radius: 10px;
}

.mat-icon {
  margin-left: auto;
}

.mat-slider-horizontal {
  min-width: 100%;
}

and then it results in this StackBlitz example. See also this GIF of the result.

Result of changes in CSS

Upvotes: 1

Related Questions