-1

I'm trying to set a card as the display wrapper inside a 'sidenav', as shown below:

<div class="content-container" width="100%" height="100%" >

  <nav class="sidenav clr-flex-fill clr-flex-column clr-align-content-between" height="100%" >

    <div class="card clr-flex-fill clr-flex-column clr-align-content-between" height="100%">
      <div class="card-header clr-align-self-start">
        Selections
      </div>
      <div class="card-block clr-align-self-auto">
        <app-task-side-nav>
        </app-task-side-nav>
      </div>
      <div iclass="card-footer clr-align-self-end">
        <button class="btn btn-sm btn-link">Footer Action 1</button>
        <button class="btn btn-sm btn-link">Footer Action 2</button>
      </div>
    </div>
  </nav>

  <div class="content-area" height="100%" width="100%" >
    <router-outlet class="router-flex"></router-outlet>
  </div>

</div>

I want the 'card footer' to be positioned at the vertical top of the available space, the 'card footer' to be displayed at the bottom of the available vertical space, and the 'card-block' to take up the available vertical space in between.

enter image description here

I've tried various 'clr-flex' related styles as shown above, but can't this to work. Any suggestions?

This is equivalent to ...

<div class="main-container">
    <header class="header header-6">
        ...
    </header>
    <div class="content-container">
        <nav class="sidenav">
<div class="card">
            <div class="card-header">
                Header
            </div>
            <div class="card-block">
                <div class="card-title">
                    Block
                </div>
                <div class="card-text">
                    ...
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-sm btn-link">Footer Action 1</button>
                <button class="btn btn-sm btn-link">Footer Action 2</button>
            </div>
        </div>
        </nav>
        <div class="content-area">
            ...
        </div>
    </div>
</div>
user2868835
  • 1,250
  • 3
  • 19
  • 33
  • Add some code snippet you tried to achieve this. – Anoop Rajasekhara Warrier Apr 06 '20 at 13:03
  • I've amended my original description to include at the end a simpler equivalent layout , where a card is inserted into a 'sidenav'. The aim is to get the card to full the entire vertical space taken by the 'sidenav', with the card header and card footer at the top and bottom of the sidenav area. Geddit? – user2868835 Apr 06 '20 at 19:10

1 Answers1

0

Found it!

The 'card' style has a default display attribute of 'block'. If you override this with 'flex' then I get the header and footer alignment I was seeking.

user2868835
  • 1,250
  • 3
  • 19
  • 33