Determine the maximum number of children divs that can be accommodated within a parent div

Question

Determine the maximum number of children divs that can be accommodated within a parent div

I am facing a situation where I have an API that returns multiple div elements. In my user interface, there is a parent div in which these child divs need to be displayed. The challenge is that if the child divs are overflowing the parent div, they should be shown on the next page.

For example, let's assume the API returns a string like this:

<div class="ab0"></div>
<div class="ab1"></div>
<div class="ab2"></div>
<div class="ab3"></div>
<div class="ab4"></div>

If the parent div can only accommodate ab0, ab1, and ab2, then I want to display these 3 divs first. When the user clicks on the '>' symbol, I intend to show ab3 and ab4. Additionally, if ab2 is partially overflowing and I can display only the overflow part on the next page, it would be ideal.

Is there a way to achieve this?

Thank you in advance.

javascript html css reactjs

Answer 1

Answer №1

One effective technique is to leverage the built-in scroll feature of the system.

The system has a preset display capacity, and by determining the height of the parent container, you can navigate through the child elements (even if they exceed the visible area) using Javascript scrollTop.

const parent = document.querySelector('.parent');
const h = parent.offsetHeight;
let page = 0;
const lastPage = Math.floor((parent.scrollHeight + 1) / h);

function next() {
  if (page < lastPage) {
    page++;
    parent.scrollTop = parent.scrollTop + h;
  }
}

function prev() {
  if (page > 0) {
    page--;
    parent.scrollTop = parent.scrollTop - h;
  }
}

.parent {
  height: 64px;
  overflow: auto;
}

.parent div {
  height: 2em;
  border: 1px solid;
  position: relative;
}

button {
  font-size: 2em;
}

<div class="parent">
  <div class="ab0">0</div>
  <div class="ab1">1</div>
  <div class="ab2">2</div>
  <div class="ab3">3</div>
  <div class="ab4">4</div>
</div>
<button onclick="prev();"><</button>
<button onclick="next();">></button>
</button>

Answer 2

One effective technique is to leverage the built-in scroll feature of the system.

The system has a preset display capacity, and by determining the height of the parent container, you can navigate through the child elements (even if they exceed the visible area) using Javascript scrollTop.

const parent = document.querySelector('.parent');
const h = parent.offsetHeight;
let page = 0;
const lastPage = Math.floor((parent.scrollHeight + 1) / h);

function next() {
  if (page < lastPage) {
    page++;
    parent.scrollTop = parent.scrollTop + h;
  }
}

function prev() {
  if (page > 0) {
    page--;
    parent.scrollTop = parent.scrollTop - h;
  }
}

.parent {
  height: 64px;
  overflow: auto;
}

.parent div {
  height: 2em;
  border: 1px solid;
  position: relative;
}

button {
  font-size: 2em;
}

<div class="parent">
  <div class="ab0">0</div>
  <div class="ab1">1</div>
  <div class="ab2">2</div>
  <div class="ab3">3</div>
  <div class="ab4">4</div>
</div>
<button onclick="prev();"><</button>
<button onclick="next();">></button>
</button>

Determine the maximum number of children divs that can be accommodated within a parent div

Answer №1

Similar questions

How do I implement Routing while running Express and React on the same port?

The parameter type (key: string, id: string, pagination: number) in the argument does not match the expected type of Boolean for the parameter

Adjust the placement of an object within cannon.js based on its local orientation

Reloading a page using Javascript

Troubleshooting a NPM issue while trying to launch a React application on Netlify

What is the method for creating two separate columns that can scroll independently?

Upgrading to React Router v6: Implementing Loader Functions with Context API

What would be the best location for me to place my code for adding fresh data to Firestore?

Leveraging an HTML form for searching and fetching data from MySQL Workbench using PHP

Attempting to create a JavaScript class within an HTML document

Insert the characteristics of the object into the header of the table, and populate the rows of the table

Combine assorted fabrics and materials in selected designs

"How to include a JavaScript file from the node_modules folder in an Angular project

The display/block feature will only function if the div element is contained within a table

Troubleshooting Bootstrap Grid Alignment Problem During Zooming

Troubles with the functionality of the Ajax loadmore feature

The link background color is malfunctioning

Making AJAX requests repeatedly within a loop

Node app experiencing port exhaustion within Azure Function

What could be causing the failure of Jsonresult with parameter in my Ajax request?