Expansion panel css problem with mat-table

[ImAnandPanchal]

Bug, feature request, or proposal:

Expansion panel css

What is the expected behavior?

There should be space between mat-table and expansion panel.

What is the current behavior?

Currently no space between mat-table and expansion panel.

What are the steps to reproduce?

StackBlitz Url: https://stackblitz.com/edit/angular-qqn7jq

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.2.4
Material: 5.2.0

[julianobrasil]

Can't it be done with css?

[ImAnandPanchal]

@julianobrasil
Yes, it can be achieved using CSS and this is how we have done in our project.

The issue I see with the base library is that CSS (margin-bottom: 16px) is not applied to the last child.

[julianobrasil]

What if you apply padding-bottom:16px to the expansion panel?

[Edit]: I'm not sure whether I understood it. It's an undesirable margin at the bottom, as I see in the image above.... or the lack of that margin?

[ImAnandPanchal]

@julianobrasil
I think you may be correct on this that we can give padding after the expansion panel but the behavior varies between last panel and other panels. All other panel comes with margin at bottom but last one. In our case the mat-card which is next in layout, merges with the expansion panel.

I am not sure if the behavior provided is correct or the one I intend to have. (I.e. The last panel should have space after opening the panel so it can be distinguished with other controls on screen)

[julianobrasil]

Oh, now I got it. It's the expected behavior. The expanded state inserts that gap in the default mode just between the panels inside the accordion.

Outside the component is up to the developer to decide how much space there should be. It makes more sense to me if you have to insert space then if you have to work with negative margins or mess with the accordion styles to take the margin away.

Messing a little with your stackblitz demo there's no border top in the table, so it seems nothing happens when you apply a margin-top:16px to datatable. But it's there. Look when I exaggerate a little bit (margin-top:160px):

[ImAnandPanchal]

@julianobrasil
I think you are right, it should be developer's preference as per application requirement instead of embedding in core material.

Thanks for your help.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}