Freeze columns with "Responsive" feature on

[Connonymous]

I am hoping to use the "freeze columns" functionality while also using the "responsive" functionality. I see from other posts that this is not possible through Caspio's standard options, but that some users have found a work around for using the "stick headers" functionality.  Has anyone come across a solution for freezing columns in this way? The sticky headers code has been pasted below as an example:

tr[class*="cbResultSetTableHeader"]
{
    position: sticky;
    top: 0px;
    z-index: 1000;
}

[PotatoMato]

Hi @Connonymous. You can try to use this code to make the header sticky and freeze the first column:

<style>

/* Set the position of the other headers row to sticky */
.cbResultSetTableHeader {
    position: sticky;
    top: 0;
    background-color: #8db6b6;
}

/* Freeze the first column */
.cbResultSetTable td:first-child, .cbResultSetTable th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #8db6b6;
    font-weight: bold;
    color: #133337;
}


</style>

 

-Potato

[Connonymous]

On 4/12/2023 at 12:57 AM, PotatoMato said:

Hi @Connonymous. You can try to use this code to make the header sticky and freeze the first column:

<style>

/* Set the position of the other headers row to sticky */
.cbResultSetTableHeader {
    position: sticky;
    top: 0;
    background-color: #8db6b6;
}

/* Freeze the first column */
.cbResultSetTable td:first-child, .cbResultSetTable th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #8db6b6;
    font-weight: bold;
    color: #133337;
}


</style>

 

-Potato

Thank you for the response, and sorry for the slow reply. This seems to work well for freezing the first column, but I am attempting to freeze the first two columns, so here is what I came up with (shown below) by adapting what you sent previously. One problem with both the original code, and my revised version of the code is that these settings also apply to the mobile version, which I would not like to happen. I am not sure if it is possible to include media queries within a datapage, but I know I have tried and failed at this in the past. Is there a way to do this, or is there a different way to resolve the issue?

I am also aware that the use of 123px seems to be a "magic number" but I was unsure of any other way to resolve this, and it does seem to handle the cases I tested on... at least on the desktop view.

<style>

/* Set the position of the other headers row to sticky */
.cbResultSetTableHeader {
    position: sticky;
    top: 0;
    background-color: #155c35;
}

/* Freeze the first two columns */
.cbResultSetTable td:nth-child(-n+2), .cbResultSetTable th:nth-child(-n+2) {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #155c35;
    color: white;
    min-width: 100px;
    max-width: 100px;
}

/* Adjust the position of the second sticky column */
.cbResultSetTable td:nth-child(2), .cbResultSetTable th:nth-child(2) {
    left: 123px;
    min-width: 100px;
    max-width: 100px;
}

</style>

 

[PotatoMato]

Hi, @Connonymous. Here is the code you can add. It will only apply the previous CSS to devices with screen sizes greater than 768 pixels:

@media (max-width: 768px) {
  .cbResultSetTableHeader,
  .cbResultSetTable td:nth-child(-n+2),
  .cbResultSetTable th:nth-child(-n+2),
  .cbResultSetTable td:nth-child(2),
  .cbResultSetTable th:nth-child(2) {
    position: static;
    left: auto;
    z-index: auto;
    background-color: initial;
    color: initial;
    min-width: initial;
    max-width: initial;
  }
}

 

-Potato

[PotatoMato]

Hi! Just to update, Caspio has added a solution to have a sticky header on responsive datapages: https://howto.caspio.com/tech-tips-and-articles/enabling-sticky-headers-in-responsive-tabular-reports/