If you have come to this page directly, please start with the Overview page for some important information.

Note that this solution is not applicable if any of the following features are enabled in your tabular report:

  • Bulk and Grid Edit
  • Bulk Delete
  • Grouping

To make your tabular report responsive, open the DataPage in edit mode and go to your results set field configuration screen. If the report doesn’t currently have a header/footer, insert them into your report, otherwise the code goes to the bottom of the current content of your header/footer.

The HTML Editor (WYSIWYG toolbar) should not be enabled.

Note that if your report DataPage also includes a search form or a details page, you must follow the responsive steps for Forms for those two screens. The steps on this page are only for the results set screen.

Copy the code below and paste it into the header of your results page, then follow the instructions for additional required customization below.

<!-- Responsive Code Begin -->
<style>
@media (max-width: 768px) { /* Change max-width to what size you want the table to change at */

  #tabular * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  #tabular *:before,
  #tabular *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  #tabular table[id^="PageActionsCtnr"] {
    border-spacing: 0px !important;
    border-collapse: separate !important; 
    margin-bottom: 7px !important; 
  }

  #tabular table[id^="PageActionsCtnr"] td {
    display: block;
    width: auto!important;
    float: left;
    text-align: left;
    padding: 1px !important;
  }

  #tabular table[id^="PageActionsCtnr"] td div {
    text-align: left !important;
  }

  #tabular table[data-cb-name^="cbTable"] {
    border: none !important;
    background: transparent !important;
    display: block;
    -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
            box-shadow: none !important;     
  }

  #tabular table[data-cb-name^="cbTable"] tbody {
    display: block;
  }

  #tabular table[data-cb-name^="cbTable"] tr:first-child {
    display: block;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #tabular table[data-cb-name^="cbTable"] tr {
    display: block;
    border: 1px solid #dddddd; 
    margin-bottom: 7px; 
    width: 100%;
  }

  #tabular table[data-cb-name^="cbTable"] td {
    display: block;
    border: none !important;
    position: relative !important;
    padding-bottom: 5px !important;
    text-align: left !important;    
  }

  #tabular table[data-cb-name^="cbTable"] td:before {
    padding-right: 5px; 
  }

  #tabular table[data-cb-name^="cbTable"] td[class^="cbResultSetActionCell"] {padding-bottom: 10px !important; padding-top: 7px  !important;} 

  /* ----------------------------------------------------------
    1c. Insert Column Labels into the content attributes below (copy rows and change the td:nth-of-type numbers as needed to match table column number)
  ------------------------------------------------------------ */

  #tabular table[data-cb-name^="cbTable"] td:nth-of-type(1):before { content: "Insert Label Here"; font-weight: bold; }
  #tabular table[data-cb-name^="cbTable"] td:nth-of-type(2):before { content: "Insert Label Here"; font-weight: bold; }
  #tabular table[data-cb-name^="cbTable"] td:nth-of-type(3):before { content: "Insert Label Here"; font-weight: bold; }
  #tabular table[data-cb-name^="cbTable"] td:nth-of-type(4):before { content: "Insert Label Here"; font-weight: bold; }


}

</style>
<div id="tabular">
<!-- Responsive Code End -->

Customization:

There are four lines that contain “Insert Label Here“. You need as many of these lines as you have columns in your report. Add or remove lines to match the number of columns in your report. Additionally, replace “Insert Label Here” with the label of the columns in the order they appear.

Finally, copy the  code below and paste it into the footer:

<!-- Responsive Code Begin -->
</div>
<!-- Responsive Code End -->