Commit c1f89c25 authored by Carsten  Rose's avatar Carsten Rose
Browse files

Implements #9203. Pin the header of table, to make it always visible even if...

Implements #9203. Pin the header of table, to make it always visible even if there are a lot of rows
parent 77c64815
Pipeline #2382 passed with stages
in 2 minutes and 53 seconds
......@@ -271,7 +271,7 @@ Setup a *report* to manage all *forms*:
head = {{'b|p:id={{pageAlias:T}}&form=copyFormFromExt|t:Copy form from ExtForm|A:data-reference=copyForm' AS _link}}
<table class="table table-hover qfq-table-50 tablesorter tablesorter-filter" id="{{pageAlias:T}}-form">
tail = </table>
rbeg = <thead class="sticky"><tr>
rbeg = <thead class="qfq-sticky"><tr>
rend = </tr></thead>
fbeg = <th>
fend = </th>
......@@ -7457,10 +7457,11 @@ QFQ iterates over the result set of `dragAndDropOrderSql`. The value of column `
QFQ CSS Classes
---------------
* `qfq-table-50`, `qfq-table-80`, `qfq-table-100` - set min-width and column width to 'auto'
* Background Color: `qfq-color-grey-1`, `qfq-color-grey-2` (table, row, cell)
* `qfq-100`: Makes an element 'width: 100%'.
* `qfq-left`: Text align left.
* `qfq-table-50`, `qfq-table-80`, `qfq-table-100` - assigned to `<table>`, set min-width and column width to 'auto'.
* Background Color: `qfq-color-grey-1`, `qfq-color-grey-2` - assigned to different tags (table, row, cell).
* `qfq-100` - assigned to different tags, makes an element 'width: 100%'.
* `qfq-left`- assigned to different tags, Text align left.
* `qfq-sticky` - assigned to `<thead>`, makes the header sticky.
Bootstrap
---------
......@@ -8293,7 +8294,7 @@ has the form be used. The following report includes the regular `form-editor`_ a
AND {{formIdHistory:S0}}=0
AND {{formAllUsage:S0}}=0
head = <table class="table table-hover qfq-table-50 tablesorter tablesorter-filter" id="{{pageAlias:T}}-form">
rbeg = <thead class="sticky"><tr>
rbeg = <thead class="qfq-sticky"><tr>
rend = </tr></thead>
tail = </table>
......
......@@ -818,13 +818,13 @@ legend {
}
}
thead.sticky th, thead.sticky td {
thead.qfq-sticky th, thead.qfq-sticky td {
position: sticky;
top: 0;
background-color: white;
z-index: 9999;
}
thead.sticky td {
thead.qfq-sticky td {
top: 49px;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment