Is there a way to dynamically determine the quantity of items that exceed the capacity of the parent container?

My current setup involves a container with draggable width and multiple children within it.

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

When the width of the container is adjusted, only a certain number of elements can fit. For example, if only 3 elements can fit due to a decrease in width, the expected outputs are (0), (1), and (+4) representing the number of elements that overflow +1.

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

In other scenarios, where only two elements can fit and 4 overflow, the expected output would be displayed as two circles with (0) and (+5).

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

While previous solutions often involve calculating the number of elements that can fit based on a fixed width, my dynamic case requires determining this dynamically. Can anyone provide guidance on achieving this using JavaScript and plain CSS?

javascripthtmlcssreactjs

Answer №1

let container = document.getElementById("container")
let count = Math.round(window.getComputedStyle(container).width / widthOFElement)

I believe this solution will be beneficial for you. In this scenario, the variable 'widthOFElement' represents the width of a circular element. You can easily incorporate this code snippet within your dragabble event listener.

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

What's the best way to position a lone CTA at the center of the second row on a two-column layout using Elementor?

On my page, I am facing a challenge of adding a second section with a single Call to Action (CTA). The previous section on the same page consists of two CTAs placed side by side with a width set at 50% each. However, now I need to add a third CTA without i ...

csswordpresselementor

Express Power Tool - Error: app.set function is undefined

My journey with creating an API using Node/Express began with a solo endeavor to learn the basics in a 'naive' manner. The initial setup worked smoothly, prompting me to experiment with express-generator. Upon completion of the setup process, th ...

javascriptnode.jsexpressexpress-generator

Retrieve and update the most recent entry

Here is the schema I am working with: var BudgetInfoSchema = mongoose.Schema({ user_email: { type: String, required: true }, user_budget: { type: Number, required: true }, platforms_budget: { type: [{ platform_id: { type: String, required ...

javascriptnode.jsmongodbmongooseschema

What is the best way to implement navigation in a React mobile application?

I'm currently in the process of developing a React App that will be compatible with both desktop and mobile devices. When viewed on a desktop, the app displays as shown below: https://i.sstatic.net/HE1AY.jpg However, when the same app is accessed on ...

reactjsreact-router

Is there a need for an extra loader for pdfjs-dist in a React application?

I am facing an issue with the pdfjs-dist dependency in my React app. I am unsure of what changes I made that caused this problem. My environment includes node v14.16.1, npm v7.9.0, react 17.0.2, react-scripts 4.0.3, and pdfjs-dist 2.7.570. When I run npm s ...

javascriptnode.jsreactjsnpmpdfjs-dist

Guide to positioning a card in the middle of a container using Bootstrap

I am struggling to center a card inside a container using CSS properties like justify-content-center, mx-auto, and hardcoding. However, I have not been able to achieve the desired result. Here is the code snippet from my HTML file: <div class="cont ...

htmlcssbootstrap-4frontendbootstrap-5

Is there a way to style the nav-item element specifically on the current page I'm viewing?

I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page). https://i.sstatic.net/maDzc.png This is the HTML code I am usin ...

htmlcssvue.jsnuxt.jsbootstrap-vue

Merge the values of the obscured inputs into a JSON-formatted string within a designated concealed input field

Is there a way to merge the hidden input values into a JSON formatted string and store it in a separate hidden input field? <c:forEach var="perForm" items="${importedPersonForms}" varStatus="count"> <input type="hidden" name="importedPerson ...

javascriptjqueryjson

Navigating an array and organizing items based on matching properties

When I receive an array that looks like this: errors = [ { "row": 1, "key": "volume", "errorType": "Data type", "expectedType": "number", &quo ...

javascriptarraystypescriptobject

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

htmlcssreactjsmaterial-uiinline-styles

storing audio files locally with Vue.js

Looking for a way to store a sound locally for my Battleship game rather than referencing it on the internet. Here's the code that triggers the sound: @click.prevent="fireSound('http://soundbible.com/grab.php?id=1794&type=mp3')" I atte ...

javascriptvue.js

Adding a question mark at the top of the content in a txt file using node.js's

When I use the fs.readFile() function to retrieve data from a .txt file, I notice that the content begins with "?Alex libman". Here is the code snippet: fs.readFile(__dirname+"/txts/generate/titles0.txt", "utf-8", function (ex, titles) { var titlesArr = ...

javascriptnode.js

Troubleshooting: Difficulty getting CSS `position: absolute` to correctly position a div above all other elements

In my current project, I am utilizing Javascript, specifically the VueJS framework, to create a page named mainTextEditor. This page consists of a text field and a 'popup' that is implemented using a div with a v-if directive to show the div when ...

javascripthtmlcssvue.jsvuetify.js

Can anyone recommend a regular expression that would target values ranging from 0.5 to 24?

I'm searching for a regex pattern that can identify numbers within the range of 0.5 to 24, excluding cases like 0,5 or 22,5. The current pattern I'm using is: /^(([0-9]|1[0-9]|2[0-3])([^,])(\.(0|5)))$/ Despite having excluded the comma ,, ...

javascriptregex

What is the best way to ensure grid element takes up 100% of the available height within a flex column

I am working with this HTML structure: https://i.stack.imgur.com/fy5Yz.png My goal is to have the .SceneWithHistory-Container take up 100% of the available height in its parent element. Below is my CSS code: .Module-Container margin-top: 120px; displ ...

htmlcss

Choosing Select2: Customizing the context of formatSelection

I've created a simple custom wrapper for Select2, which has been very helpful. However, I am facing an issue with the formatSelection field. When initializing Select2 through my wrapper, it looks like this: this.elem.select2({ allowClear : option ...

javascriptjqueryjquery-select2

How come my label and input are showing up in my navigation bar?

For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static. Despite tr ...

htmlcss

Setting the minimum height to 100% does not function properly on the inner div

I created a div named "content" with the intention of it occupying the entire height of a window. To achieve this, I added the following CSS: body { min-height: 100%; height: auto !important; /* Additional properties included just in case */ ...

htmlheightcss

What is the best way to create a time sequence canvas player?

Currently, I am working on a JavaScript feature that involves displaying a player's path on top of a static map. I have a sequence of timestamps and x,y coordinates, and I am searching for a library that can use this information to create a video play ...

javascriptreactjsvue.jscanvashtml5-canvas

AngularJS: Assigning a value to an element

I am facing the challenge of automating an iframe using Selenium Webdriver and need to input a value into a text box. Here is the HTML code: <input class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" id="name" typ ...

javascriptangularjsiframeselenium-webdriver