What makes drag and drop noticeably more fluid when including "overflow: auto"?

I'm currently working on a website's CMS and I want to create an index that allows for drag-and-drop selection. Initially, dragging and dropping on a placeholder wasn't very smooth. However, when I added the overflow: auto CSS property to the divs where dragging and dropping occurs, the process became much smoother and more user-friendly.

I'm curious to understand why this adjustment made such a significant difference in the functionality of the index. This improvement is particularly noticeable when there are numerous divs present on the webpage, such as in a nearly completed website project.

This issue has been observed in Chrome and Firefox browsers, although I haven't tested it on other browsers yet.

Check out the smoother experience with overflow auto

Compare it to the less desirable results without overflow auto

Answer №1

Consider the HTML elements as individual 'boxes'. Each box can have its own CSS properties such as height, width, margin, padding, and more. Even when a set height is given, each box will expand with its content due to the default state of overflow: visible;.

When moving elements from one element to another, jQuery allows them to break free from their original parent's properties. The child element will no longer inherit the previous properties but will instead expand based on its own CSS properties until moved into a new parent element.

In order to contain elements within a fixed size, CSS properties like overflow: hidden;, scroll;, and auto; are utilized. These properties prevent child elements from overflowing outside of the parent element, ensuring smooth handling during element manipulation.

Overflow: auto; ensures only necessary scrollbars appear for content overflow, improving visual aesthetics and performance when dragging elements around.

By implementing these concepts, the design process becomes more controlled and efficient. Consider these points when managing elements within your web projects.

Answer №2

When it comes to overflow, the default value is "visible", allowing content to render outside the element's box without being clipped.

However, setting it to auto will add a scroll-bar if any content is clipped, enabling users to see all of the hidden content.

The difference in smoothness between these two settings can be quite noticeable. For example, when overflow is set to auto, the rendering is smoother and faster compared to the default visible setting, which may appear slower or jumpy. This was particularly evident when testing in firefox using a fiddle example with elements arranged in columns.

An interesting observation is that in IE11, there wasn't a significant difference in the visual effects between auto and default settings.

To learn more about overflow and Visual Effects, refer to the Official W3 Documentation for Visual Effects

Answer №3

Upon closer inspection of the overflow-auto feature, I noticed that some of your boxes contain a horizontal scroll bar. Removing any overflow reveals that the div width expands based on the content within. This can result in varying div widths, leading to peculiar placements when dragging them within a parent container. Imagine a bucket filled with both large and small apples versus a bucket filled with apples of the same size; the arrangement of the apples would be different in each scenario.

Bucket of mixed apples: (divs of different sizes)
To see the difference in width, simply open the link without overflow = auto setting and observe how the images surpass the border on the right side due to the larger div sizes.

Bucket of uniform apples: (divs of the same size)
When overflow is set to auto, exceeding a certain width will trigger a scroll bar without impacting the div width itself. This maintains consistency and avoids any quirks in placement.

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

When examining passwords, Bcrypt returns false

In my application, I am utilizing the Promise interface along with bcrypt. Despite using the same password for comparison, I am receiving a false result. const bcrypt = require('bcrypt'); const saltRounds = 10; const password = 'secret&ap ...

javascript node.js bcrypt

Error 400 encountered while attempting to post multiple data points to MVC Core using Ajax

I am trying to send form data to my MVC controller using AJAX with JQuery, but I keep receiving a 400 error. This is how I am attempting to post the data: var count = $('#MediaList').children().length; for (var i = 0; i < coun ...

jquery ajax asp.net-mvc asp.net-core

Retrieve worldwide data for the entire application in Next.js during the first page load

Within my Next.js application, I am implementing search filters that consist of checkboxes. To display these checkboxes, I need to retrieve all possible options from the API. Since these filters are utilized on multiple pages, it is important to fetch the ...

javascript reactjs next.js

Finding the row index in an Angular material table

How can I retrieve the row index in an Angular material table? <td mat-cell *matCellDef="let row"> <mat-checkbox (click)="$event.stopPropagation()&quo ...

javascript angular typescript checkbox material-table

Step-by-step guide on obtaining the appCheck token using getStaticProps in next.js

I am facing an issue while trying to pass the appCheck token to my request in getStaticProps. Whenever I attempt to use the getToken() method, it results in the following error message: AppCheck is being used before activate() is called for FirebaseApp [DE ...

javascript reactjs firebase next.js firebase-app-check

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

I've set up a node express app and incorporated sass support for the CSS. However, when I attempt to access http://myhost.com:port/css/whatever.css, the whatever.css file is generated in the express_app_root/public/css directory as expected. The *.scs ...

css node.js web-applications express sass

React hook issue: useEffect not updating socket.io-client

Although I am attempting to receive updated values of react hooks inside the socket on function, unfortunately, it seems that the values are not being updated. Even if I edit the react hook values, the changes are not being reflected inside the socket. Her ...

javascript reactjs socket.io

What are the steps for including and excluding components in Parallax JS?

When working with Parallax JS: I am trying to modify the components within the <li> tags of my menu, but I am unsure how to do so without restarting the plugin. I cannot seem to find the destroy command. Currently, I am using the JQuery version of ...

javascript jquery parallax parallax.js

Exploring the GET request in Meteor JS

When using Meteor JS, I have a get function set up like this: localhost:3000/profile?user=rishav I am now trying to access the value of user in a Meteor JS template. When dealing with post data, we can use event.target.blah.value; where blah is the id. H ...

javascript meteor

Is there a way to drag an image into a designated area and automatically modify the container accordingly?

I am looking to implement a feature where users can drag an image into either container 1 or container 2. Depending on where the image is dropped, I want to update that specific container by making a database call or updating a row in one of my tables. My ...

jquery ajax jquery-ui draggable droppable

Navigating in a Curved Path using Webkit Transition

Currently, I am working on a simple project to learn and then incorporate it into a larger project. I have a basic box that I want to move from one position to another using CSS webkit animations and the translate function for iOS hardware acceleration. I ...

javascript animation webkit css motion

We encountered an issue: Headers cannot be set after they have been sent while attempting to read files

I encountered an error when attempting to read a file and send the response back to the browser. [ 'Error: Can\'t set headers after they are sent.', ' at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:344:11)&apo ...

javascript node.js express fs

Sending $(this) to a fresh P5 object is not defined

Within this code snippet, I am iterating through each "player_visualizer" element and aiming to generate a new P5 instance for each element. By using console.log(context) inside the loop, I can retrieve the context of the specific element, which is exactl ...

javascript jquery p5.js

Having trouble getting Sass extending to work in a basic scenario?

Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...

css angular sass

Generate a text input field within a dropdown menu

Below is an example of my basic HTML code for a drop-down list: <span id="Div_List"> <label for="Gender">For:</label> <select name="Gender" id="Sex"> <option value="1">1000mtr</option> <option val ...

javascript jquery html

Arabic and Latin letters become intertwined

I am currently working on implementing an Arabic version of our website without affecting the other languages. The goal is to keep the changes to the markup minimal. Here is the English version: <div class="location_description"> <span itemscope ...

html css

Choose solely the initial and concluding hyperlink within the divs

The structure I am working with is as follows: <div class="navigation_sub_item_background" id="sub_nav_2"> <div class="navigation_sub_item" id="2_1"> <a class="navigation__sub__link" href="?p=2_1"> <span> ...

html css css-selectors

What is the best way to eliminate the locale string from the default language in Next.js sitemap?

I have set up my website to be displayed in both French and English languages. After building my sitemap, I noticed a issue with the URLs listed in my sitemap.xml. Instead of having: /blog /en-US/blog I found that it displays as: /fr-FR/blog /en-US/blog ...

javascript next.js internationalization sitemap

Creating a dynamic effect with CSS: animating a gradient background on hover

I'm currently working on styling my menu items with a background gradient that changes upon hover using the following CSS: #sidebar ul li a:hover { background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%); background-im ...

html css

Executing a Javascript function using ssl

As a newcomer to SSL and Javascript, I hope you'll pardon any lack of knowledge on my part. I've been trying to research my question online, but haven't had much luck finding the answer. Context In simple terms, my website has a subdomain ...

javascript ssl iframe https static-ip-address

CSSer Q&A