How to add padding or margin only to layout container in Angular ngMaterial?

Question

When I add layout-margin or layout-padding to the layout container, this adds margin / padding around each flex child and the container itself.

Example:

 <div layout="row" layout-margin> <div flex>Parent layout and this element have margins.</div> </div> 

I want to add fields to the container, not to the children of the container.

Is there a predefined class in Material Design to add padding or fields to the layout container without adding them to children inside the layout container?

Answer 1

You can create a parent class for the container and write css as follows.

 .container { margin : 20px; } 

Hope this helps!

Answer 2

zps215 has a better answer, even if it does not use ngMaterial, the effect you are looking for is best resolved using plain CSS. However, the best solution would be to use padding for the parent container, not the field.

 .container { padding: 20px; } 

However, if you really need to solve this problem with ngMaterial, you can put the markup in another div element and add a layout field to it.

 <div layout-margin> <div layout="row"> <div flex>Parent layout and this element have margins.</div> </div> </div> 

This would have the same desired effect, although it could be confusing to anyone who adds children to this div, as they also receive margins.

Answer 3

I suppose you want to use: class="md-padding" in the parent container.