CODEWITHSUNDEEP
cssangularjsflexboxangular-material
dman
dman

Reputation: 11073

Angular-Material Layout Behavior.... sibling behavior issue

I am reading Angular Materials Layout Container. In the example of 'Layout Directive', the code exists:

<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
</div>
<div layout="column">
  <div flex>First item in column</div>
  <div flex>Second item in column</div>
</div>

What doesn't make sense to me is that the first <div layout="row"> only spans 50% of the row, not the entire row. Half of the row is shared with the sibling <div layout="column">.

Since <div layout="column"> is the sibling of <div layout="row">, it should not be in the <div layout="row">.

It is confusing to me that the behavior of <div layout="column"> is as if it is a child of <div layout="row">, when that is not the case(it is a sibling).

Can anyone clarify this please? Is this an error?

Upvotes: 0

Views: 30

Answers (1)

Gustavo Gabriel
Gustavo Gabriel

Reputation: 1296

Well that depends on the parent of these 2 divs, when the layout of the parent is not declared, it assumes its a row:

<div>
    <div layout="row">
        <div flex>First item in row</div>
        <div flex>Second item in row</div>
    </div>
    <div layout="column">
        <div flex>First item in column</div>
        <div flex>Second item in column</div>
    </div>
</div>

So you should change the default layout if you want a different behaviour:

<div layout="column">
    <div layout="row">
        <div flex>First item in row</div>
        <div flex>Second item in row</div>
    </div>
    <div layout="column">
        <div flex>First item in column</div>
        <div flex>Second item in column</div>
    </div>
</div>

Upvotes: 1

Related Questions