Member Avatar for mushget

Hey,

I have a problem which i don't know how to solve.
The problem is that my db rows are displayed in a div tag that has a limited width and height and my db field is 150 characters max.

So when i insert 10 records that are 150 characters long i get 10 rows on my display page which is fine, and design looks ok, but the problem begins when those records are less than 150 characters long.
I have a lot of blank space and i get page #2 which i won't to avoid.

Anyone have an idea?
I was thinking, maybe i can check the length and increase my display limit?

  • 3 Contributors
  • 2 Replies
  • 111 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by macgurl70

Dani AI

Generated

For this is a classic mismatch between how the UI is laid out and how pagination is calculated. The symptom (lots of blank vertical space, then an unexpected "page 2") means pagination is being driven by visible height or a fixed assumption about each record's rendered height instead of a fixed count of items per page. Two robust approaches:

  • Server-side pagination by item count (recommended): always request a fixed number of rows (LIMIT/OFFSET). That guarantees N records per page regardless of text length.
  • Make each record render at a consistent height on the client: use CSS truncation or min-height so layout doesn't change dramatically with shorter text. 's table idea can yield uniform rows, but a list with controlled row height is more flexible for responsive design.

Example CSS patterns to keep heights consistent and clamp text:

.listing {
  height: 500px;
  overflow: hidden;
}

.item {
  box-sizing: border-box;
  min-height: 60px;
  padding: 8px;
  overflow: hidden;
}

.item .snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

If pagination must adapt to available space (dynamic, client-driven pages), measure after layout and request that many items from the server. Simple client-side measurement:

var container = document.querySelector('.listing');
var item = document.querySelector('.item');
var perPage = Math.max(1, Math.floor(container.clientHeight / item.getBoundingClientRect().height));

Notes and cautions: measure only after fonts and CSS load (use window.load or font events), debounce on resize, and avoid truncating critical info without a visible "read more". For targeted debugging (as requested), include the HTML for one record, the CSS rules for the container and item, and the current pagination code (server LIMIT/OFFSET or client logic). That information makes it straightforward to pick the best fix.

Recommended Answers

All 2 Replies

Member Avatar for teedoff

Have you tried displaying your query results in a dynamic table instead of a div?

Member Avatar for macgurl70

do you have a link where we could see the page in question, or perhaps post the code?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.