Jump to content

Search the Community

Showing results for tags 'header'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Caspio Bridge
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 3 results

  1. I want to change a header of submission datapage based on a comparison between two virtual fields on the page. The virtual fields are fixed values for the record drawn from an underlying query, using dropdown values. If Virtual 2 <> Virtual 3 a section with a submission field for the Financial Statement Report is hidden (via Rule 1) , and if Virtual 2 = Virtual 3 the same field is set to be required (via Rule 2). I did not create the header, but it looks currently like this: <div class="container mt-3 mb-3"> <div class="row"> <div class="col mb-3" style="display:inherit !important;"> <h4>Add your Invoice and a Financial Statement Report</h4> <a href="https://c4ffn695.caspio.com/folderlogout" class="ml-auto btn btn-secondary">Logout</a> </div> </div> <div class="row"> <div class="col"> If Virtual 2 <> Virtual 3, I want to header to read 'Add your Invoice' and if not 'Add your Invoice and the Financial Statement Report' I tried (to no avail) - with different header values - the following script in the Footer <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { if ("[@cbParamVirtual2]" == "[@cbParamVirtual3]" ) { document.querySelector("h4").innerHTML="Some title"; } else { DataPage, you may try document.querySelector("h4").innerHTML="Other title"; } }); </script> But I am no JS expert Any help sincerely appreciated Floris
  2. I'm struggling getting some CSS correct in a tabular datapage and could use some help. Aggregate rows do not respond to hiding columns in the same way that data rows do when deployed. (See screenshots) In this example, I'm trying to hide three extra cells in the aggregate row. When I preview the datapage it works. When I deploy the datapage, it does not. Note that the first 4 sets of table selectors all work. Here's the CSS in my header element: <style> <!-- WORKS: --> #dashtable table:nth-of-type(1) td:nth-of-type(9) {display: none;} #dashtable table:nth-of-type(1) th:nth-of-type(9) {display: none;} #dashtable table:nth-of-type(1) td:nth-of-type(7) {display: none;} #dashtable table:nth-of-type(1) th:nth-of-type(7) {display: none;} #dashtable table:nth-of-type(1) td:nth-of-type(8) {display: none;} #dashtable table:nth-of-type(1) th:nth-of-type(8) {display: none;} #dashtable table:nth-of-type(1) td:nth-of-type(6) {text-align:center;} #dashtable table:nth-of-type(1) th:nth-of-type(6) {text-align:center;} <!-- PREVIEW WORKS, DOES NOT WORK WHEN DEPLOYED: --> #dashtable .cbResultSetTotalsDataCell {display:none;} </style> <div id="dashtable"> (closing "div" is in footer element. ) Thoughts?
  3. I've enabled editing functionality for a search results page. When attempting the edit, the editing options are underneath the header row, making the editing options hard to see (see attached image). In Chrome I can inspect the editing options window, adjusting its z-index from 100 to an arbritary 1200 and that brings the editing options window forward to the front. However, I can't figure how to adjust this in Caspio. In my Caspio style source, I've experimented with the below z-index adjustment, but it hasn't worked: { /*Results Page Grid Edit Action Container Attributes*/ text-align: left; vertical-align: middle; padding: 0px 3px 0px 3px; white-space: nowrap; margin: 0px; border: none; width: auto; z-index: 1200; }
×
×
  • Create New...