Pivot Table columns displays as rows on mobile.

[CTW2020]

I have a Pivot Table that looks fine on desktop.  I want to see the same view on mobile.  My understanding of Caspio Pivot tables is that they are not responsive, so I should see the same view on mobile.  When I view it in Caspio preview and reduce the width of the screen, it looks the same as on desktop.

When i view it on an iPhone, each row (which has 5 columns), breaks down and shows each data cell as rows.  So my 5 columns are shown over 5 rows.  See attached screenshots.

*******************

I added some HTML to the heading of my pivot table: ( I don't think this is affecting it, because I removed this code and i'm still seeing the same thing)

HTML in Pivot Table.

<style>
table[id^="cbTable"] > tbody > tr:nth-child(1) > th:nth-child(1):before {
content: "Visit Number" !important;
width: 100px;
}
table[id^="cbTable"] > tbody > tr:nth-child(2) > th:nth-child(1):before {
content: "Est. time since \A randomization" !important;
white-space: pre-wrap;
width: 100px;
}
table[id^="cbTable"] > tbody > tr:nth-child(3) > th:nth-child(1):before {
content: "Length of visit" !important;
width: 100px;
}
</style>

****************

I added some CSS to make the heading line up:

@media screen and (max-width: 780px) {
    .page-id-716 .cbResultSetTable.cbTableDefaultCellspacing, .page-id-716 tr.cbResultSetTableHeader,  .page-id-716 td.cbResultSetData{
        width: 100% !important;
        margin: 0px !important;
        display: table !important;
}
    .page-id-716 th.cbResultSetLabel.cbResultSetHeaderCell, .page-id-716 th.cbResultSetLabel.cbResultSetHeaderCell::before{
    width: 250px !important;
    }
}

How can I prevent the 5 columns on my rows from being displayed over 5 rows?

Thanks in advance for any help you can provide.

[sandy159]

Hello @CTW2020,

You are correct,  the responsive feature is not available on Pivot DataPages.

The pivot table may be displayed like this if it is deployed together with other DataPages (especially those where responsive mode enabled) on the same page. 

As a workaround for this, you may try to deploy the DataPage as an iFrame.

Hope this helps!

[futurist]

On 11/10/2020 at 6:37 AM, CTW2020 said:

I have a Pivot Table that looks fine on desktop.  I want to see the same view on mobile.  My understanding of Caspio Pivot tables is that they are not responsive, so I should see the same view on mobile.  When I view it in Caspio preview and reduce the width of the screen, it looks the same as on desktop.

When i view it on an iPhone, each row (which has 5 columns), breaks down and shows each data cell as rows.  So my 5 columns are shown over 5 rows.  See attached screenshots.

*******************

I added some HTML to the heading of my pivot table: ( I don't think this is affecting it, because I removed this code and i'm still seeing the same thing)

HTML in Pivot Table.

<style>
table[id^="cbTable"] > tbody > tr:nth-child(1) > th:nth-child(1):before {
content: "Visit Number" !important;
width: 100px;
}
table[id^="cbTable"] > tbody > tr:nth-child(2) > th:nth-child(1):before {
content: "Est. time since \A randomization" !important;
white-space: pre-wrap;
width: 100px;
}
table[id^="cbTable"] > tbody > tr:nth-child(3) > th:nth-child(1):before {
content: "Length of visit" !important;
width: 100px;
}
</style>

****************

I added some CSS to make the heading line up:

@media screen and (max-width: 780px) {
    .page-id-716 .cbResultSetTable.cbTableDefaultCellspacing, .page-id-716 tr.cbResultSetTableHeader,  .page-id-716 td.cbResultSetData{
        width: 100% !important;
        margin: 0px !important;
        display: table !important;
}
    .page-id-716 th.cbResultSetLabel.cbResultSetHeaderCell, .page-id-716 th.cbResultSetLabel.cbResultSetHeaderCell::before{
    width: 250px !important;
    }
}

How can I prevent the 5 columns on my rows from being displayed over 5 rows?

Thanks in advance for any help you can provide.

 Hi,

You may refer to this link on how to appy stylings to multiple sibling elements all at once: