Issue with empty space for table with a few rows using fixed table header

[fkang-pu]

FEATURE REQUEST

Description

Using fixed table header with vertical scrolling is easier to view data in a table on a webpage, especially with many columns and/or rows. However, there are a few issues when using this feature with Bootstrap-table plugin. One issue is empty space for the table with vertical scrollbar when the table has fewer rows than pagination size.

The fixed table header feature requires the setting of table height in px.

Comment

• previous solution was not to use fixed table header if total rows are less than 5, and set a fixed table height for other cases.

• two issues with the solution:

  • each column width and row height vary when coupling with table-responsive feature
  • some templates are shared by multiple web pages, and same table height is not ideal for different page layouts. e.g. animal_list_stats template is shared by animal list and compound detail pages

---

DESIGN

Code Change Description

The new solution is based on the observation that table rendering goes through at least two steps by Bootstrap-table. Still need to dive deeper to understand the whole process.

• new code: setTableHeight.js
  • capture the table height (as a div height) before calling Bootstrap-table JavaScript code for final rendering.
  • set table height by comparing the div height with desired table height (% of viewport height).
  • call Bootstrap-table method to set table height and vertical scrolling.
• additional notes
  • the captured table height before final rendering (as a div height) seems to be the height of initial rendering of <tbody>.
  • The height of fixed table header seems to be 120 px based on "inspect element" of several web pages e.g. study list, animal list

Tests

• Applied new code to several templates related to study, animal and sample in PR602.

[hepcat72]

While working on other issues, I noted that the Infusates table pagination controls is off the bottom of the page unnecessarily (when you're scrolled to the top and there are only a handful of records). I think that's what this issue describes, but I'm not sure. In any case, I though I would post a screenshot that demonstrates the malformed page:

[hepcat72]

Note how there is a vertical scrollbar that must be used to get to the pagination controls below the oversized table.