md-card-actions button alignment with layout-xs="column"

[ad0ran]

There seems to be an alignment issue if you apply layout-xs and layout-align-xs.
codepen: http://codepen.io/anon/pen/yOVjXW

[topherfangio]

This appears to be caused by the first and last elements having left and right margin set (respectively), but them not being equal. Ideally, we'd find a better solution (perhaps having the card container have the proper padding).

That said, I do not see a single instance in the spec where a card's action stretch all the way across. The card actions should be short words, and thus they should generally fit even on mobile devices.

[ad0ran]

@topherfangio it's odd though, because if you just set the layout to "column" and the layout-align to "start" (like in the vertical buttons example) the buttons align just fine.

i just added the md-raised classes to the buttons off the codepen example: http://codepen.io/anon/pen/qZRZJK

[devversion]

@topherfangio When want to apply the correct padding, then we need to use some conditional checks in CSS, but that's not possible.

So at the moment I figured out two ways:

• Condition Classes through JavaScript
• Remove Last Type of Margin when Breakpoint Small is matched

[topherfangio]

@devversion What are the conditional checks we want to use? Shouldn't the md-card-actions always have a certain amount of padding?

[devversion]

@topherfangio I played a bit with the action button padding.

And tried to move the padding upward to the md-card-actions container, but then I noticed that there will be always a different padding for different action types.

• md-button
• md-icon-button

So for that, we need to have some conditional checks and apply a proper class (which applies the padding etc.) on the md-card-actions container, like .md-icon-actions or .md-button-actions.

[topherfangio]

Hmm, I am not sure we can pick one or the other. For instance, there are many cases where the actions can contain both:

pulled from http://www.google.com/design/spec/components/cards.html#cards-actions

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.