-2

I currently have a draggable width container with some children.

all_content_fit

Since its width is draggable once the width is small enough that say for example only 3 elements can fit. Expected outputs are (0), (1), and (+4) (Number of elements that overflow + 1).

3_overflow

Other cases: Here only two elements fit, and 4 overflows. The expected output is two circles with (0) and (+5).

case3_only_2_Fit

I saw other posts where they use a fixed width and calculate the number of elements that can fit from that. However, in my use case, the width is varying and I need to get the number of elements that can fit/overflow dynamically. How can this be done using javascript and plain CSS?

Fer-de-lance
  • 375
  • 5
  • 23
  • "Can this be done using react, javascript and plain css?" - the question you're asking really doesn't have anything to do with React. – Dai Nov 02 '21 at 11:30
  • 1
    Just use `getBoundingClientRect` to get the actual size of a container (or maybe `window.getComputedStyle`): https://stackoverflow.com/questions/13435604/getting-an-elements-inner-height – Dai Nov 02 '21 at 11:32

1 Answers1

0
var popupDiv = document.getElementsById("container")
let count = Math.round(window.getComputedStyle(popupDiv).width/widthOFElement)

I hope this help. here the widthOFElement is the width of round element. and you can add this in dragabble event listener.

Abhinav
  • 388
  • 4
  • 12