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

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;
 }

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

Dialog box is not fit for the screen on multiple selecting files

javascript

jquery

css

ember.js

ember-1