CODEWITHSUNDEEP
htmlcssangularjsangular-material
jofftiquez
jofftiquez

Reputation: 7708

Angular Material Design layout="row" contents are overlapping the window

So here's my HTML 

<div id="someId">
    <div layout="column" layout-padding>
        <h3 class="someClass" align="center">Week 2</h3>
        <div layout="row"  style="outline: 1px solid red">

            <!-- <div ng-repeat="doge in Doges">
                // contents
            </div> -->

        </div>
    </div>
</div>

That produces this : enter image description here The red outline is the actual width of the browser. Why does the 5th item goes through that instead of going next line?

Upvotes: 2

Views: 3112

Answers (2)

Danish Tariq
Danish Tariq

Reputation: 13

They are trying to adjust in whatever space is available to them and disrespecting the fact they need a minimum space which in your case happens to be more then the screen width which is being offered. so if you want them to stretch out you need o offer them more space which could either be next line (i.e you need to provide wrapping) or you need to offer a horizontal scroll.

Upvotes: 1

jofftiquez
jofftiquez

Reputation: 7708

Actually I just layout-wrap to <div layout="row" style="outline: 1px solid red"> and it will automatically wrap the contents.

<div id="someId">
    <div layout="column" layout-padding>
        <h3 class="someClass" align="center">Week 2</h3>
        <div layout="row" layout-wrap  style="outline: 1px solid red">

            <!-- <div ng-repeat="doge in Doges">
                // contents
            </div> -->
        </div>
    </div>
</div>

Upvotes: 6

Related Questions