CODEWITHSUNDEEP
cssangularjsflexboxangular-material
Jean-Pierre Olivier
Jean-Pierre Olivier

Reputation: 57

Angular Material Dialogs fixed height issues across browsers

I've been pulling my hair out trying to get to a solution that works with all my use cases and think I finally found one that I wanted to share.

What I wanted was a sticky header, sticky footer and scrollable content that worked in and out of fullscreen mode. It also needed to work across all browsers (Yes, you too Safari!).

Finally, I didn't want to resort to CSS overrides because I know Angular Material 1.x.x hasn't been playing nicely with Safari.

The following template is what I arrived at. Shout if you have improvements or if it helps!

<md-dialog flex-xl="25"
           flex-lg="30"
           flex-md="40"
           layout="column">
  <md-toolbar class="md-toolbar-tools" flex="none">
    <h2>Add Friends</h2>
    <span flex></span>
    <md-button ng-click="vm.cancel()">
      <md-icon>clear</md-icon>
    </md-button>
  </md-toolbar>

  <md-content flex-xs="100" flex-sm="100">
    <!--Your content here-->
  </md-content>

  <md-dialog-actions flex="none">
    <span flex></span>
    <md-button ng-click="vm.cancel()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

You'll note the flex-xs="100" and flex-sm="100". I fullscreen in those scenarios so adjust accordingly.

Upvotes: 1

Views: 1034

Answers (1)

Laura Schoebel
Laura Schoebel

Reputation: 114

I don't know if this is exactly what you want, but I recently came across a similar problem where I needed the md-dialog to have a sticky toolbar (with sticky tabs below) and a sticky footer on the bottom of the modal. (I am using the dialog for user comments.) I ended up wrapping the dialog content that I needed to scroll into an md-content div and wrote some custom css for the overflow-y behavior.

Here is my HTML:

<md-dialog>
    <md-dialog-toolbar>
    </md-dialog-toolbar>
    <md-tabs>
        <md-tab>
            <md-tab-body>
                <div id="comments">
                    <div class="comments-list-wrapper">
                        <md-content class="chat">
                        </md-content>
                    </div>
                    <md-dialog-actions id="footer">
                    </md-dialog-actions>
                </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>
</md-dialog>

Here is my CSS:

#comments {
    .comments-list-wrapper {
        min-height: 200px;
    }
    md-dialog-actions#footer {
        order: 1;
        flex-shrink: 0;
    }
    .chat {
        max-height: 320px;
        overflow-y: scroll;
    }
}

I don't know if this is what you were looking for precisely, but in action it does this.

Upvotes: 1

Related Questions