If it does not fit on the div, show: more X results

Question

If it does not fit on the div, show: more X results

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I need to solve the following problem:

I have a div that displays a list of names that are loaded according to a query condition.

This list of names varies a lot, sometimes it appears 5, sometimes 30 names appear.

I need to limit the display of the names as follows, the names appear until the end of the DIV and at the end a counter of the missing ones appears. For example, instead of appearing NAME1, NAME2, NAME3, NAME4, NAME5 in a DIV that only fits 3 names, appears, NAME1, NAME2, THERE ARE MORE THAN 3 NAMES.

How can I do this?

Today I'm showing the names on the screen with the query below, but sometimes the problem occurs.

    <?php
    while (($row = oci_fetch_array($nomes, OCI_ASSOC+OCI_RETURN_NULLS)) != false) {
        $NOME   = $row['NOME'];

        <div id="linhaazul"> 
            <div id="celpaciente"><b><?echo $NOME ?></b></div>                      
        </div>

php html css oracle

asked by anonymous 20.12.2017 / 16:05

2 answers

1

Create a variable that tells you how many items your result array has and another variable to tell you how many items you have already shown on the screen. When iterating to show names use an if to show only as long as the number of items shown on the screen is less than two. If greater, subtract 2 from the total amount. Something like this will be

 var quantidadeLinhasNoResultado
 var quantidadeLinhasInseridas

 for iterando no resultado
      if( quantidadeLinhasInseridas < 2)
           mostra o nome
           incrementa quantidadeLinhasInseridas em mais um
      else
           mostra " e mais " (quantidadeLinhasNoResultado - 2) " nomes"
           Sai do for.

Of course, you'll have to change that part into "pseudo code" for php, but the general idea is that.

20.12.2017 / 16:17

Hibernate is not mapping classes How to add social buttons

score 1 · Accepted Answer

Well actually, with the items being rendered by PHP it gets a little tricky and any solution will sound like a gambiarra, but come on.

You can use the text-overflow property of CSS , which basically identifies whether a particular text has exceeded the container boundaries and adds a corresponding text, eg ...

In div with 200px and text that exceeds these 200px

div#teste {
  white-space: nowrap;
  width: 200px; 
  overflow: hidden;
  text-overflow: ' E mais...';
}

<div id="teste">
Teste teste teste teste teste teste teste teste teste
</div>

(if you do not reach the limit, the string 'And more ...' is not added)

Only then was it good size, but if it is a very important requirement to count how many were missing, you can do the following ...

Change text-overflow from 'And more ...' to 'More XX names';

When performing looping in the results, store the number of names in a variable javascript example ...

let totalNomes = <?= $total ?> // 30 nomes

After this, get the text of div , and check with a regular expression or other method if there is a word "More XX names", if there is why the text extrapolated div , then just get this text, by typing the string 'More XX names', giving a split in virgulas and checking length , the result will be the number of names that entered div .

So, just subtract this result with the total number of names that will give the amount that is missing in div , after that just set in div a new text overflow by replacing 'More XX names', by the resulting value 'More' + result + 'names';