CODEWITHSUNDEEP
material-designflexboxangular-material
Simon H
Simon H

Reputation: 21007

Material design sidenav: a div prevents correct flex

Can anyone help with this codepen where basically the addition of a div to the markup is preventing a nice arrangement of elements?

What I want is the image and 'should show' message to be visible and for the list to fill out the remaining space in the sidenav.

The core challenge is in this html.

 <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="sidenav md-sidenav-left md-whiteframe-z2" layout="column">
    <header>
      <img src="https://dl.dropboxusercontent.com/u/240178989/images/artichoke_lg2.png" />
    </header>

    <div class="toolong">
      <ul flex>
        <li ng-repeat="i in series">Entry {{i}}</li>
      </ul>
      <h2>Should show</h2>
    </div>
  </md-sidenav>

Worth noting that the Angular Material website has the look I am after but I cannot find within their code a clue to solve this.

Upvotes: 0

Views: 117

Answers (1)

fabioDA
fabioDA

Reputation: 11

Using the following seems to sort of work, you'll get the idea... that is, if I understood correctly your question. Basically I've added a flex in the bottom h2, and added the overflow:scroll in the entries div. 

<div class="toolong" style="overflow:scroll">
  <ul flex>
    <li ng-repeat="i in series">Entry {{i}}</li>
  </ul>
</div>
<h2 flex>Should show</h2>

Upvotes: 1

Related Questions