Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi All,
is it possible to make the first columns-row sticky so that the columns-headings are always visible? I use zk 9.0.0.1 ce
Regards Andy
I found a CSS solution, please see https://zkfiddle.org/sample/dlh5ii/2-sticky-column-header
Are you referring to the frozen feature like this demo
I think i didn't ask the question clearly ...
When I look at this demo page, the blue bar (Year, Season, Month, 1 ...) of the grid at the top of the screen should remain anchored when I scroll up the entire page.
My grid is built into a "long pager" without Grid-Scrollbar. When you scroll down, you can no longer see the header. Therefore this sticky should stay at the top of the screen.
There is no such built-in feature as the sticky-header that floats over a grid when scrolling down.
When there are lots of data in a grid, we suggest using paging mold or set a fixed height or visibleRows to enable a scrollbar.
Is there any reason that you can't use a scrollbar?
You can implement this sticky header by javascript. Since the header is in an independent element: <div id="sWKQ8-head" class="z-grid-header" role="none">
You can listen to onScroll event and make the div sticky by CSS like
position: absolute;
z-index: 100;
and set left, top, width by javascript.
The grid has a maximum of 20 rows and is inserted at the bottom on a page with several elements (Longpager). The entire page already has a scrollbar and I don't want a separate one for the grid. If you scroll on the smartphone, the header would eventually be out of the visible area and that could be solved by keeping the header of the grid at the top.
Could you give me an example of how I would have to implement this in JavaScript?
Asked: 2021-02-08 02:33:35 +0800
Seen: 18 times
Last updated: Feb 17 '21
