maaartinus - 6 months ago 22

AngularJS Question

In my angularjs application, I'm displaying a "main table" on (nearly) every page. This table has thousands of logical rows, but only a few physical rows (so it's fast avoiding huge DOM overhead).

The number of physical rows is data-independent (I display them even when there are no logical rows). I implemented scrolling of the table and I want it to exactly fit in the window, so that no scrolling of the page is necessary.

For this, I need is to know how many rows do fit. The height of every row is fixed (using

`height: 20px !IMPORTANT`

`overflow: hidden`

`var t = $("main-table");`

var extraHeight = $(window).height - t.position().top - t.height() - someReserve;

var extraRows = Math.floor(extraHeight) / normalRowHeight);

physicalRows.length += extraRows;

The problem is that I don't know when the values settle down. I start with

`physicalRows.length = 10`

`$timeout`

But it doesn't look good with the table growing and shrinking randomly. For example, I get the following lengths:

`10 -> 33 -> 31 -> 30 -> 30 (done)`

Tuning the number didn't help, even doubling

`normalRowHeight`

extraRows = Math.max(extraRows, 1);

which looked terrible with the table growing row by row. Without it, I occasionally get a sequence like

`10 -> 33 -> 56 -> 36 -> 31 -> 30 -> 30 (done)`

The increase to 56 came from the HTML not being updated between iterations.

What can I do? Is there a way to find out when the sizes are right?

I introduced the iterative computation as the direct one didn't work right. The problems had multiple causes:

- The row height was not exactly constant, which led to multiple iterations needed.
- I was listening to both window size and table position and size. There was some debouncing, but it worked for each event source separately. Sometime two events departed in the same digest iteration (i.e., before the table could resize), which led to the sequence .
`10 -> 33 -> 56`

My problem was trying a too complicated solution for a simple problem. The iterating hid the original problem and caused others. The answers made me to give up the stupid idea.

Answer

If I understand correctly :

- you build your
`main-table`

from a base array of`physicalRows`

- you compute "how much space is left"
- you update
`physicalRows`

- you update
`main-table`

based on the new array (am I correct ?) - back to 2

If this is indeed the process, you can avoid the looping part, by not using `table.height`

in your formula :

```
// no extraHeight : get the full height available for your table
var height = $(window).height - t.position().top - someReserve;
// no extraRows : get the full rowCount
var rowCount = Math.floor(extraHeight) / normalRowHeight);
// if you want to display at least 10 rows :
rowCount = Math.max(rowCount, 10);
// no adding to existing size : set the correct size
physicalRows.length = rowCount;
```

Since this computation does not depend on the table height, you know for sure the value will not change when you update the rows of your table.

The second thing is the height of a row : the height attribute does not take into account border width or padding, so the actual height of a row in your table will be higher than just your cell's height attribute.

See for example : https://jsfiddle.net/1sm3oct1/

even with a `height: 20px !important`

attribute on the table's cells, the actual height looks more like `23px`

.

Play around with the css and click "Run" to see the actual's table height.

You can try to find through testing the actual size for your rows :

```
// testing several pages show that the table's rows are 5px larger than
// height in css :
var normalRowHeight = 20 + 5;
```

or use the existing table to figure out the height for one of its row :

```
var normalRowHeight = t.height() / physicalRows.length;
```

You can also look at he following SO question : How to fix height of TR ?