javascript - 对话框不适合多个选择文件的屏幕

Question

我有一个包含文件夹上传文件的对话框，当我选择多个文件(大约超过 25 个文件)进行上传时，对话框底部的长度增加了，滚动条是不显示向下滚动以完整查看文件。

截图如下:

这里我添加了 36 个文件，当我想查看上传的文件列表时，它没有完全显示，滚动条也显示向下滚动以查看更多内容。

对话框的 HTML 在这里:

<div class="upload-files-dialog" tabindex="0" role="dialog" style="position: absolute; height: auto; top: 0px; left: 277px; display: block; width: 270px; right: auto; bottom: auto;" aria-describedby="ui-id-3" aria-labelledby="ui-id-4">

我试过的对应的css样式为:

div.upload-files-dialog {
 {
    position: absolute;
    height: auto;
    top: 0px;
    left: 226px;
    display: block;
    width: 270px;
    right: auto;
    bottom: auto;
 }

我已经提到高度是自动的，然后它也不会随屏幕调整。

对话框对应的hbr文件在这里:

{{#if view.showFileList}}
    {{file-list view.fileList}}
{{/if}}

对应ember代码的fileList在这里:

        menuContext: null,

        formData: function () {
            if (!this.get('menuContext.formData')) {
                this.set('menuContext.formData', Ember.Object.create({ data: Ember.Object.create({ }), files: [] }));
            }
            return this.get('menuContext.formData.data');
        }.property('menuContext'),

        uploadHandle: null,

        showFileList: function () {
            return (this.get('uploadHandle.files.length') || this.get('menuContext.formData.data.file.length')) > 1;
       }.property('uploadHandle.files.length', 'menuContext.formData.data.file'),

        fileList: function () {
            return this.get('uploadHandle.files') || [].slice.call(this.get('menuContext.formData.data.file'));
        }.property('uploadHandle.files', 'menuContext.formData.data.file')

当我按下控制台 (F12) 时，滚动条开始出现，对话框也根据页面进行更改。但是当我上传文件时间本身时，我需要。我不知道问题出在哪里，无论是 css 还是 ember 或 jquery。任何人都可以就此向我提出建议。

Answer 1

您需要为 div.upload-files-dialog 指定一个 max-height 才能发生溢出。

例子:

div.upload-files-dialog {
    position: absolute;
    height: auto;
    max-height: 370px;
    top: 0px;
    left: 226px;
    display: block;
    width: 270px;
    right: auto;
    bottom: auto;
 }