Avatar of Boopathy S
Boopathy SFlag for India

asked on 

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

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:
User generated image
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.
CSS* emberjQuery

Avatar of undefined
Last Comment
Boopathy S
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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;
 }
Avatar of Boopathy S
Boopathy S
Flag of India image

ASKER

Hi, I have used overflow: scroll; in the css. But when I'm using console, I'm getting two scroll bars.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Boopathy S
Boopathy S
Flag of India image

ASKER

Thank You
CSS
CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo