Jump to content
  • 0

Pivot Table rows collapses on mobile


CTW2020
 Share

Question

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?

1742454061_CHScheduleDesktop.thumb.png.982d756af42a531ebce1016e7d3c3440.png778980306_CH-ScheduleMobile.thumb.png.5392f47a3cfc693d7a3327429596cf51.png

Thanks in advance for your help with this.

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...