CODEWITHSUNDEEP
htmlcssangularjsmaterial-designangular-material
Nesh
Nesh

Reputation: 2541

Remove layout padding applied to child in angular material

Following is my code, in which I am trying to add padding to only parent div, but somehow layout-padding is also applied to the inner div <div layout="column" flex> making the div to shift a little down. Please check the attached screenshot -

Image

My code -

<div layout="row" style="height: 100%;" layout-padding>
        <div id="r2" flex="20">This is content one</div>

        <div layout="column" flex>
            <div id="r3" flex="15">This is content two</div>
            <div id="r7" flex>This is content three</div>
        </div>
    </div>

EDIT - I searched in the docs as well but unable to locate https://material.angularjs.org/latest/layout/options

Upvotes: 1

Views: 8012

Answers (2)

sxleixer
sxleixer

Reputation: 159

Adding md-no-style as a class on the respective element does remove all styles, applied to the element.

<div layout="row" style="height: 100%;" layout-padding>
    <div id="r2" flex="20">This is content one</div>

    <div layout="column" flex>
        <div id="r3" flex="15">This is content two</div>
        <div id="r7" flex>This is content three</div>
    </div>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

The docs do say "layout-padding adds padding inside each flex child. It also adds padding to the layout container itself."

If you look carefully, you will see that the text in the left div IS aligned with that in the right top div. It's only that the left div doesn't have an inner div as the right div does.

I'd suggest that you either add the padding manually to the row (not using any angular method as this doesn't seem to be a simple option.)

For instance:

 <div layout="row" style="height: 100%; padding:1em ">

I confess I'm not familiar with Angular so perhaps there is a method I'm not seeing (or understanding).

OR..add an internal div to #r2

<div id="r2" flex="20">
   <div>This is content one</div>
</div>

then the padding on the inside of #r2 will match that on the inside of the column div.

Essentially at the moment the padding on the flex-children is highlighting/reflecting their different contents.

Upvotes: 2

Related Questions