Dialog box is not fit for the screen on lot of files selected

Boopathy S
Boopathy S used Ask the Experts™
on
I'm having dialog box with the upload files for the folder, when I'm selecting the multiple files (more than 25 files approx) for the upload, the dialog box getting increased the length to the bottom and scroll bar is not showing to scroll down to see the files fully.

Here is the screenshot:
dialog-box.png
Here I have added 36 files and when I want to see the uploaded file list its not showing fully and scroll bar also showing to scroll down to see the further.

Corresponding css style I have tried as:

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

Open in new window


I have mentioned height as auto and max-height with some size, then also its not getting adjust with the screen.

The corresponding hbr file for the dialog is here:

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

Open in new window


The fileList of corresponding ember code is here:

        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')

Open in new window


When I'm pressing the console (F12), the scroll bar is getting coming and dialog box is also changed as fit for the page. But I need on when I'm upload the file time itself. I don't know where it is getting the problem either css or ember or jquery. Can anyone please suggest me regarding this.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
you have two curly braces here :
div.upload-files-dialog { <--- one
{ <-- two

also check : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

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

Author

Commented:
Hi, I have used overflow: scroll; in the css. But when I'm using console, I'm getting two scroll bars.
Multitechnician
Top Expert 2014
Commented:
So use :
    overflow: hidden scroll;
or :
    overflow-x: hidden;
    overflow-y: scroll;

Author

Commented:
Thank You

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial