Material-design-lite: Card subtitle not aligning correctly

[jdepypere]

Looking into the cards, the mdl-card__subtitle-text is not behaving as expected. It does style the content correctly, but positioning is off. Here is a codepen sample and this is how it looks:

According to the mdl docs, the mdl-card__subtitle-text should be a child of the title element, which it is. This issue looks related to this issue from a while ago with the solution:

I would recommend adding the subtitle in the line below.

Which doesn't really seem like a valid solution since it has to be a child of the title element.

I've also checked the specs but can't find a subtitle styled like this anywhere. Am I missing something obvious?

[kybarg]

+1
.mdl-card__subtitle needs to have flex-direction: column;

[johnsonium]

The Google documentation is vague. When it says the subtitle should "be a child of the title element" it doesn't indicate whether it should be a child of the inner div containing the title or a child of the h2 element that houses the title itself. It doesn't say what type of element should be used for the subtitle. There is also no indication whether the subtitle requires it's own inner div container.

I think I've tried every combination and I've found that if you make the subtitle a 'small' element, apply the class 'mdl-card__subtitle-text' and make it a child of the title inner div then you get a much more pleasing result with the subtitle appearing just after the title but aligned to the top of the lowercase letters of the title. See Codepen here.

I'm still not sure if that's where the subtitle is supposed to appear, or whether it should be on a line below the title.

[Garbee]

@johnsonium We purposefully don't detail every element to use. Since in this case, any inline element (say span or small) will work fine. It is up to developers to play around and use what they find best or need.

I think the docs need some updating here as well. The subtitle doesn't necessarily _have_ to be a child of the header text.

[johnsonium]

I thought the point of MDL was to provide a consistent look and feel. Yet, a small and h3 render differently if given the 'mdl-card__subtitle-text' class though they are both inline elements.

I'm really not sure what it's supposed to look like. An h3 renders as a superscript of the title while both small and span render on the same line though aligned with the top of the lowercase letters in the title.

[acrogenesis]

+1 for this google's spec does show the subtitle below the title. https://www.google.com/design/spec/components/cards.html#cards-actions

[mibcadet]

@johnsonium: You are right, MDL was to provide a consistent look and feel. If I have to set correct subtitle style manually why this element 'mdl-card__subtitle-text' exist if it is useless??

Ok I have found a sollution, quite better than 'put in next line'.
Do like that:

<div class="mdl-card__title">
  <h5>
    <div class="mdl-card__title-text"> Some title </div>
    <div class="mdl-card__subtitle-text">Some subtitle</div>
  </h5>
</div>

Ofcourse you may replace h5 with h4 etc.

[mibcadet]

@VivaLaPanda I have shared sollution when title and subtitle in MDL works fine. However DIV are fine everywhere (IMO) as long you close them inside selector they were opened.

[noinkling]

+1 on this, very confusing.

@mibcadet Your solution seems to work pretty well, thanks.

[Garbee]

Just looked into this (since stuff works in the V2 mockup fine.) We can't fix this due to BC issues.

Actual fix

.mdl-card__title {
  flex-direction: column;
}
.mdl-card__subtitle-text {
  align-self: flex-start;
}

Will work as it should in 2.x. But sadly 1.x is stuck with the bad layout. Sorry all, this one is surely my fault from refactoring and not including a subtitle to test with.

[noinkling]

@Garbee With those rules the title seems to be aligning to the right in 1.0.6: https://jsfiddle.net/dzL25bmq/1/

Am I missing something?

Edit: Setting .mdl-card__title-text to align-self: flex-start moves it back to the left, but it's also aligned to the top, rather than the bottom like it was before (when mdl-card__title has a height set to accommodate a background image or whatever).

Edit 2: Without really being familiar with flexbox, the full fix seems like it should be something like:

.mdl-card__title {
  flex-direction: column;
  justify-content: flex-end;
}
.mdl-card__title-text, .mdl-card__subtitle-text {
  align-self: flex-start;
}

[Garbee]

We can't add that into 1.x since if people have already done other hacks to get it working then it could collide. SemVer means we can't introduce it.

As I recall, the subtitle should show just under the primary title, not towards the end of the container. I'll look at the spec again later to verify.

[lars-derichter]

+1

[sgomes]

Cards will be rewritten in #4472. Not feasible to fix until then.