How to ensure dialog header and footer are always visible?

Help Requests
1

Usin current aurelia-dialog’s markup and CSS, when a dialog-body have a long content, the footer get out of the view, forcing the user to scroll down do use any button on dialog-footer (but then, he can’t see the dialog-header).

Is there any change I can do on my dialog html template and/or in my CSS to force a scrollbar in dialog-body (when needed) and ensure the header and footer are always visible?

Something like that:

dialog

Thanks in advance!

2

I did this with customised css using flex. I use config.useCSS(myDialogCss); to replace the whole css for dialog. But it’s unnecessary show all my dirty css here.

Here I extracted the very minimum css (about 20 lines) to support the layout you want. There are plenty of comments in the css for how to do it.

It uses flex layout, means IE is not supported.

You need <body aurelia-app="main" class="ux-dialog-flex"> for css to take effect.

Limitation: only works with config.settings.centerHorizontalOnly = true;

.ux-dialog-flex ux-dialog-container {
  overflow-x: hidden;
  overflow-y: hidden; /* remove scroll bar from outer container */
}

.ux-dialog-flex ux-dialog-container > div,
.ux-dialog-flex ux-dialog-container > div > div {
  box-sizing: border-box;
  height: 100%; /* full size wrapper */
}

.ux-dialog-flex ux-dialog {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* make header body footer same width */
  max-height: 100%; /* fit header and footer in current window size */
}

.ux-dialog-flex ux-dialog ux-dialog-header,
.ux-dialog-flex ux-dialog ux-dialog-footer {
  flex: 0 0 auto; /* don't grow/shrink header and footer */
}

.ux-dialog-flex ux-dialog ux-dialog-body {
  flex: 0 1 auto; /* init height is auto, and shrinkable */
  overflow-y: auto; /* the scroll bar */
}

Final effect

05%20am
05%20am616×779 62.3 KB

18%20am
18%20am616×513 48.2 KB

3

For reference, for better control of ux-dialog width, I have additional classes .wide-dialog, .medium-dialog … to control the width with responsiveness support.

4

Sorry for the late reply, huochunpeng.

Thanks for the help. I didn’t have time to test it, because I am stuck with an “Module build failed: RangeError: Maximum call stack size exceeded” error thas it driving me nuts.

As soon I can run again my project, I’ll test it and let you know.

Thanks again