The dialog box does not display properly on the screen when selecting multiple files

When I try to upload more than 25 files in the dialog box, the length of the box increases and there is no scrollbar to view all the files.

Check out the screenshot:

https://i.sstatic.net/vBcsh.png

I added 36 files but couldn't see them all at once. The scrollbar doesn't appear either.

Here is the HTML code for the dialog box:

<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">

The corresponding CSS style I tried is:

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

Even after setting the height as auto, it still doesn't adjust properly.

Below is the handlebars file for the dialog:

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

The fileList in the Ember code is as follows:


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

Pressing F12 brings up the scrollbar and adjusts the dialog. However, I want this to happen automatically when uploading files without needing to press F12. Unsure whether the issue lies in the CSS, Ember, or jQuery. Any suggestions?

javascriptjquerycssember.jsember-1

Answer №1

To prevent overflow, it is important to define a specific max-height for the element div.upload-files-dialog.

Here is an example code snippet:

div.upload-files-dialog {
    position: absolute;
    height: auto;
    max-height: 420px;
    top: 0px;
    left: 200px;
    display: block;
    width: 300px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to trigger an onClick event multiple times in React

I have a code where I pass it to the onClick event and I want it to execute 3 times: (this code basically selects a random product from products and then updates the state using Hooks to display it in the shopping cart. Instead of just one product, I want ...

javascriptreactjs

Listening for keypress events on a div element using React

I'm currently struggling with implementing a keypress listener on a component. My goal is to have my listener activated whenever the "ESC" key is pressed, but I can't seem to figure it out. The function component I am working with is quite stra ...

javascriptreactjstypescript

Conceal an HTML column in jQuery by clicking a button with the help of link_to in Rails and H

I'm attempting to conceal an HTML column by clicking a button using the jQuery hide method. Here is the HTML code: %br.clear - @cards.each do |card| %div{class: "hide_#{card.id}"} <- included this to address the problem .existing-credit ...

javascriptjqueryruby-on-railshaml

What is the best way to run a function within an if statement without duplicating code if the condition is false?

When working with relay mutation code, I find it necessary to reload the store in order for it to sync with the database. This is because if the text being added is the same as previously added text, the relay store throws an error called flattenChildren.. ...

javascriptreactjsecmascript-6relayjs

Issues with implementing jQuery on Crispy Forms input fields are causing unexpected behavior

<div id="div_id_code" class="form-group"> <label for="id_code" class="control-label col-lg-2 requiredField"> Code<span class="asteriskField">*</span> </label> <div class="controls "> <input type="text" ...

javascriptjquerydjangodjango-formsdjango-crispy-forms

I encountered an issue with rendering static images when attempting to package my node-express app with pkg

Struggling to display an image from the public folder in my express app? I could use some guidance on configuring the path to properly render images or css files within the public folder when creating an executable file using pkg. Here's a snippet of ...

javascriptnode.jsexpresspackaging

Learn the process of utilizing signed URLs in conjunction with ReactJS to securely store files in AWS

I am currently working on a form where I need to attach images along with regular text inputs in order to submit data to my MongoDB. Here is the code for my post creation function: const [postData, setPostData] = useState({ text: '', i ...

javascriptnode.jsreactjsamazon-web-servicespre-signed-url

utilizing BrowserRouter for dynamic routing in react-router-dom

I'm currently facing a challenge with creating a multi-tenant SaaS solution. Each tenant needs to be able to use a subdomain, so that I can extract the subdomain from the URL and make a call to a REST API to retrieve data specific to that tenant. For ...

javascriptreactjsfrontendreact-router-v4react-router-dom

Are there more efficient methods than having to include require('mongoose') in each models file?

Is it possible to only require mongoose once in the main app.js file and then pass it to other files without loading it again? Will the script do extra work every time the same module is required? var mongoose = require('mongoose'); I'm wo ...

javascriptnode.jsexpressmongoose

Tips for utilizing maps in a react component within a Next.js application

I received an array of data from the backend that I need to display on a React component. home.js import Head from "next/head"; import Header from "../src/components/Header"; import * as React from 'react'; import { styled } ...

javascriptreactjsnext.js

Restrict the quantity of items retrieved from an AJAX response

An AJAX call has returned a response consisting of a list of <a> elements: <a href="/1/">One</a> <a href="/2/">Two</a> <a href="/3/">Three</a> I am looking to select only the first n a elements from this response ...

javascriptjqueryajax

Guide to displaying an email template on a webpage

I am facing a challenge with rendering an email template on a web page. The email template comes with its own CSS, for example: <style> body{ font-size : 20px; } </style> However, when I attempt to display the email template on my webpage, ...

javascripthtmlcssemail

How can I assign several Objects to a single array?

My goal is to save several objects into an array. Specifically, I have five objects named obj1, obj2, obj3, obj4, and obj5. ...

javascriptvue.js

When clearInterval is used, the value of the variable is wiped out

My goal is to constantly update the text of a <p> element every 100ms, increasing the number by one each time. This process should only be triggered when the user clicks on the screen and stop once the user releases the click. The issue I'm fac ...

javascriptjquery

Processing JSON data through parsing in JavaScript

To fulfill the requirement, the data must be extracted via JSON and supplied to a chart. The data should be in the format of: var dataArray = [{data:[]},{data:[]}]; Below is the code to retrieve JSON data on the client-side: $.ajax({ type: "POST", ...

javascriptjqueryasp.netjsonhighcharts

Prevent discrepancies between the outcome on the server and the client side

My website utilizes a combination of PHP and JavaScript for processing results - some server-side, some client-side. Solely relying on JavaScript can cause issues with search engine crawling, while using only PHP may not provide real-time responses accura ...

javascriptphpcoding-style

Troubleshooting Issue with Asp.net Gridview and JQuery DataTable: Gridview Event Failures

When using my Asp.net web app, I successfully implemented a page with a Gridview control that binds to the database and allows for Delete/Add/Update functionality. The events such as GridView1_RowDeleting, GridView1_RowEditing, and GridView1_RowUpdating w ...

jqueryasp.netgridviewjquery-pluginsdatatables

What is the best way to increase the font size without resizing the parent input element?

Is there a way to increase the font size in this text box without enlarging the box itself? Any suggestions or advice would be appreciated! https://i.sstatic.net/91pon.jpg. Below is my CSS code for reference (the class of the form is 'box'). .bo ...

htmlcss

Sharing an array with a child component using the @Input decorator

I am attempting to send an array to a child component. The array is created within the subscribe method of the onInit lifecycle hook in the parent component. Parent component: import { Component, OnInit } from '@angular/core'; @Component({ s ...

javascriptangular

Simple guide to maintaining the integrity of an absolute path within a script tag in index.html using Vite

When using Vite, absolute paths in the index.html file are automatically transformed based on the base configuration, which is quite convenient. For example, if my index.html looks like this: <script type="text/javascript" src="/config.j ...

javascripthtmlviterollupjs