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

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

Example:

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

I want to add margins to the the container and not to the childrens of the container.

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

Answers


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

.container {
   margin : 20px;
}

Hope this helps!


zps215 has the best answer, even though it's not using ngMaterial the effect you're looking for is best solved using normal CSS. However the better solution would be to use padding on the parent container rather than margin.

.container {
    padding: 20px;
}

However, if you really really need it solved with ngMaterial you could wrap your markup in another div and add layout-margin to it.

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

This would get the same desired effect, though it might get confusing to anyone who adds children to that div as they would get a margin as well.


Need Your Help

Maximum sum of two intervals

algorithm

Two players A and B are playing a game with array A of N elements in which each player chooses an array interval with maximum sum.The other simultaneously chooses another interval in the same array...

Excel 2013 - Sum with a date range

excel excel-formula

Good day, I have finally decided to ask for help. I have 1 workbook, multiple worksheets. The formula gives me #Value! which I am understanding that it has a wrong datatype. I am simply wanting loo...