[MdCard] md-card-expand-content inside md-tab is open by default and ripple effect resize the card-actions - Githubissues

vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.

https://www.creative-tim.com/vuematerial

MIT License

9.89k stars 1.16k forks source link

[MdCard] md-card-expand-content inside md-tab is open by default and ripple effect resize the card-actions #1790

Closed PrismPrince closed 5 months ago

PrismPrince commented 6 years ago

When adding expanded contents on tabs, the margin-top calculates to 0, I think it calculates the height before the component is updated. 😕

When creating card with ripple effect and inside it are md-card-head and one md-card-actions, the padding of the actions are removed.

Steps to reproduce

Create tabs.
Inside tab, create card(s) with expand content and other card with one md-card-header and one md-card-actions

Which browser?

Google Chrome v66.0.3359.181

What is expected?

Expanded content must not opened by default, and calculates the marginTop after the component actually rendered.
Card actions must not resized

What is actually happening?

On MdCardExpandContent.vue, the mounted function sets this.marginTop to 0.
On the ripple effect, the class .md-card-header+.md-card-actions:not(:last-child) takes effect and remove the padding on top and bottom because it adds the span tag for animation

Reproduction Link

Here's a sample: https://codesandbox.io/s/pyo13z80zq

smg99 commented 5 years ago

Shall we expect any update here? It's still reproducible.

ArturAralin commented 5 years ago

@sumitg-3767 yes. It's still reproducible