Components: Expansion Panel - Bootstrap grids not working inside

[theunreal]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Bootstrap grids should work inside an expansion panel

What is the current behavior?

When trying to use bootstrap grids inside expansion panel to use the panel width, the line breaks in the last column

What are the steps to reproduce?

http://plnkr.co/edit/V2B5ISY0qE7L8QJbGxGF

What is the use-case or motivation for changing an existing behavior?

Using bootstrap grids inside an expansion panel

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

Material beta.10

[josephperrott]

This is caused by bootstrap expecting that the entire page will have a box-sizing: border-box; and all items inherit this same rule.

From scaffolding.less:

* {
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}

.mat-expansion-panel however defines box-sizing: content-box. You should be able to work around this by applying a css rule for your content in the panel that reestablishes box-sizing: border-box;.

[micronyks]

I see ! Thanks for giving the work around. I have observed it is happening with other components too.
@josephperrott So what is the plan? will it resolve in next update or we have to set it manually every time.

[josephperrott]

@micronyks You will need to set it manually as it is simply a conflict in expectation from the bootstrap grid.

[adripanico]

@josephperrott You saved my day.

[wareworks]

• {
  .box-sizing(border-box);
  }
  *:before,
  *:after {
  .box-sizing(border-box);
  }

This is not working for me in Angular 8.1.1 and in component css file. I am using expansion panel into stepper.

Do I need to do something extra?

[richardsengers]

Can someone clarify (@josephperrott ?) why the expansion panels have a box-sizing: content-box ... ?
What are the cons for using content-box as a default value for the expansion panels?

I've set the .mat-expansion-panel class to box-sizing: inherit like this

 .mat-expansion-panel {
    box-sizing: inherit;
  }

and it looks like everything is working correctly, which makes me wonder why the default value is content-box
There must be a good explantion for it :-)

[wareworks]

I have tried to overwrite mat-classes but didn't work. Even I have tried @richardsengers solution. It shows applied css into browser developer tools but behaviour is still same.

I am using mat-expansion-panel into mat-vertical-stepper.

I used mat-grid-list to test and it works properly with it but on mobile screens it doesn't wrap content properly. Please provide if there is any anything else I would need to change anywhere.

[richardsengers]

Welll...my solution only works if no parent element has a box-sizing: content-box

Maybe that's the problem you are facing.
Try

.mat-expansion-panel {
    box-sizing: border-box;
 }

[wareworks]

Welll...my solution only works if no parent element has a box-sizing: content-box

Maybe that's the problem you are facing.
Try

.mat-expansion-panel {
    box-sizing: border-box;
 }

Thanks Richard, I tried it before reaching on Google and this thread but didn't work. It gets applied and doesn't change anything. Also Expansion panels are hiding content on mobile screens even after applying this style.

There is one more issue with HORIZONTAL(No option of Horizontal Orientation into mat-selection-lists) - There is no Above|Below checkBox position setting and doesn't wrap itself nor can define custom template with bootstrap.

[angular-automatic-lock-bot[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._}