Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Caspio Bridge
    • Caspio Apps for Ukraine
    • 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


Last Updated

  • Start


Filter by number of...


  • Start




Website URL






  1. Any ideas on 'how to format' this custom link to be inline with the 'data download' link and include an icon? Please see below code I'm using for the custom link placement and the attached image, thank you: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var child = document.querySelector("li[id^='DataDownloadButton']"); var parent = child.parentElement; var a = document.createElement('a'); var linkText = document.createTextNode("my title text"); a.appendChild(linkText); a.title = "my title text"; a.href = "http://example.com"; parent.parentNode.appendChild(a); }); </script>
  2. Hi Caspians, I'd like to have a report with a link in the HTML block. But when i mouse over the link, I'd like to view Image related to the Field. Is it possible? Michelle
  3. Hello everyone, Does someone know how to dynamically change the font color of a text column in a tabular report? For instance, I have a field named Indicator and it is the second column in the report. If the text value is equal to "Final", the font color must be set to red. Thanks in advance. -dspolyglot
  4. Hi, I have a Yes/No field that is used in the Search form on a tabular datapage. I want to use a radio button for this field but I need to remove the 'Any' option (where the result is blank/null and all records show). I need the user to be able to only see 'Yes' and 'No' results separately and not all mixed together with the 'Any'/Null option. The setup wizard doesn't allow for removing 'Any' on a Yes/No field so I'm trying to do this with css. The radio button field is the 3rd in the list so I've been trying versions of: input#value3_12{ display: none!important; } Or input[id="value3_12"]{ display: none!important; } Neither of these works but it's got to be close. Does anyone know how to remove the 3rd 'Any' choice in a Yes/No radio button?
  5. Hi, It would be really great to successfully publish datapages in modal blocks (dialog box / popup windows). While experiencing some success at displaying datapages in modals, I can see there are some problems: 1. The entire page refreshes on loading the modal for the first time. Not really a show stopper but something to be mindful of because you see a blank white moment during reload. 2. In a web form datapage, if field validation on submission fails, the page does not return to the modal even when configured to do so via a modal url link. (the popup disappears). 3. Javascript in a page within a modal doesn't run as expected or doesn't seem to trigger at all. Any ideas? JC
  6. Comments on your script or code can be helpful specially when it gets complicated and larger. This helps you to mark different parts of your code which in turn will help you debug them. I compiled a list of comment tags that can be used on every part of your DataPage whether it's for a calculated field, formula data type, JavaScript, CSS, or HTML. HTML comment tag: <!-- this is 1 line of comment --> or <!-- these are multiple line of comments--> CSS comment tag: /* This is 1 line of comment */ or /* These are multiple line of comments */ JavaScript // single line of comment or /* This is 1 line of comment */ or /* These are multiple line of comments */ SQL -- Singe line of comment or /* This is 1 line of comment */ or /* These are multiple line of comments */
  7. Hi folks I wanted to share a cool code with everyone when you press the Submit Button on a Form. Well when you press the Submit Button with a file in it to load and there is a unique field in it (such as a Username for a registration form), there's a bit of a delay until you ge to the confirmation screen. This confuses the Submitter and may press the button again - which results in an error because now the form is submitted twice but the same username was alreast submitted on the first form Anyway you want a Loading screen to pop up. Caspio should have this simple feature for a "low coding" platform! In your header drop this code (#Submit is the submit button - on an update form its something different, #processing is the name of my div that will show the processing window after submission): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#Submit").click(function(){ $("#processing").css({"display":"table"}); }); }); </script> In the Footer drop this: <div id="processing" style="display:none;background-color:rgba(222,200,70,0.9);height:100vh;width:100vw;position:fixed;top:0;"><br/><br/><span style="display:table;height:75wh;margin:auto;top:0;bottom:0;left:0;right:0;">Processing, Please Wait....<br/><br/><img style="display:table;margin:auto;" src="http://skquares.com/processing.gif"></img><br/<br/></span></div> ------- thats it! Notice the display is set to none because you dont want to show the window until the Submit button is pressed via the Jquery script. Notice the height and width are set to the size of the screen with a position of fixed, top:0 - so that the whole screen is covered but you can shrink it by putting less width and height; background is my own color choice but you can change that - note leave the opacity not at 100% but I have it at 90%(0.9) so that the user can still see the form a little. Also, http://skquares.com/processing.gif is where i store MY image so you have to change it to where you image is hosted (but you could use mine i guess). Ok I hope this helps!
  8. Hi there! I had a use case where drop-down input contained long lines of text. By default, a long line of text inside select input is getting cropped at the right. But it was required to keep the full text visible. I wrote the script that can be used as it is to solve this problem. Just copy and paste the code below into your form data page header. <script> document.addEventListener('DataPageReady', _=>{ const mainFunction = _=> { hideSelectContainers() addVirtualSelectOptions() addVirtualSelectOptionsListeners() addVirtualSelectOptionsContainerListeners() addStyles() } const hideSelectContainers = _=> { document.querySelectorAll('.cbFormSelect').forEach(item=> {item.style = "display: none;"}) } const virtualSelectContainerGenerator = selectElement => { let template = ''; selectElement.querySelectorAll('option').forEach(option=>{template += `<div value="${option.getAttribute('value')}" class="virtualOption">${option.innerHTML}</div>`; option.classList.add("hideElement")}) return `<div class="virtualSelectContainer"> <div class="virtualSelect"> <span class="virtualSelectText">${selectElement.value}</span> <div class="virtualOptionContainer hideElement">${template}</div> </div><span class="custom-arrow"></span></div>`; } const addVirtualSelectOptions = _=> { document.querySelectorAll('[class*="cbFormBlock"]').forEach( item =>{ if(item.querySelector('select')!=null) { item.insertAdjacentHTML('beforeend', virtualSelectContainerGenerator(item.querySelector('select'))) } }) } const addVirtualSelectOptionsListeners = _=> { document.querySelectorAll('.virtualOption').forEach( option => { option.addEventListener('click', e=> { let realOption = document.querySelector(`[value="${e.target.getAttribute('value')}"]`); realOption.parentElement.selectedIndex = realOption.index e.target.parentElement.parentElement.querySelector('.virtualSelectText').innerText = e.target.innerText; e.target.parentElement.classList.toggle("hideElement"); }) }) } const addVirtualSelectOptionsContainerListeners = _=> { document.querySelectorAll('.virtualSelectContainer').forEach( item =>{ item.addEventListener('click', e => { let clickedElement = e.target; if (clickedElement.classList.contains('virtualSelectContainer')) { clickedElement.querySelector('.virtualOptionContainer').classList.toggle('hideElement'); } else if (clickedElement.classList.contains('virtualSelectText')) { clickedElement.nextElementSibling.classList.toggle('hideElement'); } else if (clickedElement.classList.contains('custom-arrow')) { clickedElement.previousElementSibling.classList.toggle('hideElement'); } }, true) }) } const addStyles = _=> { let style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .virtualSelectContainer { position: relative; max-width: 800px; --custom-paddings: 1em 5.5em 1em 1.5em; box-sizing: border-box; color: white; white-space: normal; } .virtualSelectContainer:hover { cursor: pointer; } .virtualSelect { box-shadow: 0 10px 20px rgba(0,0,0,1); font-size: 1.1rem; background: #4d5061; border: 0; max-width: 100%; } .hideElement { display: none; } .virtualOption { padding: var(--custom-paddings); margin-top: 10px; overflow: hidden; } .virtualOption:hover { background: #4A65FF; color: white; } .virtualSelectText { display: block; padding: var(--custom-paddings); } .custom-arrow { display: block; background-color: #3b3c47; height: 100%; width: 5rem; position: absolute; right: 0; top: 0; pointer-events: none; } .custom-arrow::before, .custom-arrow::after { z-index: 10; --size: .65em; content: ''; position: absolute; width: 0; height: 0; left: 50%; transform: translate(-50%, -50%); } .custom-arrow::before { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid rgba(255,255,255,.5); top: 40%; } .custom-arrow::after { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid rgba(255,255,255,.5); top: 60%; } .cbSubmitButtonContainer .cbSubmitButton { background-color: #4d5061; box-shadow: 0 10px 20px rgba(0,0,0,1); } .cbSubmitButtonContainer .cbSubmitButton:hover { background-color: #4A65FF; }`; document.querySelector('head').appendChild(style);} mainFunction() }) </script> It is currenlty deployed on this test page: https://c7eku786.caspio.com/dp/7f80b000aa77201adc02489f8c6d Hope someone will find this useful.
  9. Hi guys, Is it possible to print the tabular report excluding some data? I have a tabular report, where we keep some data and one of the column is important for analytics, but should not be included in the printed report. It is a report with totals and aggregations, so I want to see in the printed report the totals without the aggregated fields, only the total without the data it combines. I know it might be possible to create two different datapages, but it is not good practice to use a datapage just for printing a single report sometime. Does anybody have any JS or CSS suggestions for my case?
  10. Hi, I would like to hide fields properly in the new responsive code. I've been enclosing fields via HTML Block via <table style="display:none"> Field1 Field2 </table> to hide my fields but with the new responsive feature enabled. It is not hiding the fields properly. Any thoughts/suggestions on this?
  11. Hi, Just want to share this bit of JavaScript and CSS that creates a fixed "scroll to top" button on the corner of your DataPage and shows up only when the user starts to scroll the page. (I implemented this on my Tabular Report DataPage that has many records per page) Header (CSS): <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } </style> Footer (the actual button and the JavaScript): <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <script> document.addEventListener('DataPageReady', function (event) { mybutton = document.getElementById("myBtn"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (window.scrollY==0) { mybutton.style.display = "none"; } else { mybutton.style.display = "block"; } } }) function topFunction() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script>
  12. I have a VERY large table and after some number of columns, the vertical headers get out of alignment by a bit. (The date is supposed to be under "FAT Due" and the blank space under "Assembly Due") Here is the code I'm using: <style type="text/css"> [class*="cbResultSetHeaderCell"]{ text-align:center !important; vertical-align:center !important; } .cbResultSetLabel:nth-child(35),.cbResultSetLabel:nth-child(36),.cbResultSetLabel:nth-child(37),.cbResultSetLabel:nth-child(39),.cbResultSetLabel:nth-child(40),.cbResultSetLabel:nth-child(41),.cbResultSetLabel:nth-child(42),.cbResultSetLabel:nth-child(43),.cbResultSetLabel:nth-child(44),.cbResultSetLabel:nth-child(46),.cbResultSetLabel:nth-child(47),.cbResultSetLabel:nth-child(48),.cbResultSetLabel:nth-child(49),.cbResultSetLabel:nth-child(50),.cbResultSetLabel:nth-child(51),.cbResultSetLabel:nth-child(52),.cbResultSetLabel:nth-child(53),.cbResultSetLabel:nth-child(54),.cbResultSetLabel:nth-child(55),.cbResultSetLabel:nth-child(56),.cbResultSetLabel:nth-child(57),.cbResultSetLabel:nth-child(58),.cbResultSetLabel:nth-child(59),.cbResultSetLabel:nth-child(61),.cbResultSetLabel:nth-child(62),.cbResultSetLabel:nth-child(63),.cbResultSetLabel:nth-child(64),.cbResultSetLabel:nth-child(65),.cbResultSetLabel:nth-child(66),.cbResultSetLabel:nth-child(67),.cbResultSetLabel:nth-child(68),.cbResultSetLabel:nth-child(69),.cbResultSetLabel:nth-child(70),.cbResultSetLabel:nth-child(71),.cbResultSetLabel:nth-child(72),.cbResultSetLabel:nth-child(73),.cbResultSetLabel:nth-child(75),.cbResultSetLabel:nth-child(76),.cbResultSetLabel:nth-child(77),.cbResultSetLabel:nth-child(78),.cbResultSetLabel:nth-child(79),.cbResultSetLabel:nth-child(80),.cbResultSetLabel:nth-child(81),.cbResultSetLabel:nth-child(82),.cbResultSetLabel:nth-child(83),.cbResultSetLabel:nth-child(84),.cbResultSetLabel:nth-child(86),.cbResultSetLabel:nth-child(87),.cbResultSetLabel:nth-child(88),.cbResultSetLabel:nth-child(89),.cbResultSetLabel:nth-child(90),.cbResultSetLabel:nth-child(92),.cbResultSetLabel:nth-child(93),.cbResultSetLabel:nth-child(94),.cbResultSetLabel:nth-child(95),.cbResultSetLabel:nth-child(97),.cbResultSetLabel:nth-child(98),.cbResultSetLabel:nth-child(99),.cbResultSetLabel:nth-child(100) { writing-mode:vertical-rl; white-space: pre; transform: rotate(180deg); border:none; } </style> It transforms 60+ columns. Any ideas on how to fix this?
  13. I'd like to make the format of my list report look nicer, how can I do this? Specifically, I'd like to be able to highlight every other row of data (not data cell) and align the labels and the data so that they are directly underneath each other. Edit: Additionally, it would be nice if I could have conditional formatting on the data so that if it is below the goal, the text turns red and if it's at or above the goal the text turns green. The data cells are using calculated fields. Is there a way I can do this conditional formatting in an HTML block that references the calculated field?
  14. I'd like to have a colored table that can highlight past due items. This is the code I have in an HTML block that highlights the row of past due dates and turns the font color red. <div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div> <script> var isi = document.getElementById("visi[@field:lines_Line_Number]"); if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){ isi.parentNode.parentNode.style.backgroundColor = 'yellow'; //background color isi.style.color="red"; //font color } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script> Meanwhile, this is part of the color I have in my header that turns the column headers and background different colors. style type="text/css">[class*=cbResultSetHeaderCell]:nth-child(1) { background: #3377FF !important; } td[class*="cbResultSetData"]:nth-of-type(1){ background-color: #4D88FF !important; } [class*=cbResultSetHeaderCell]:nth-child(2) { background: #1966FF !important; } td[class*="cbResultSetData"]:nth-of-type(2){ background-color: #3377FF !important; } [class*=cbResultSetHeaderCell]:nth-child(3) { background: #0055FF !important; } td[class*="cbResultSetData"]:nth-of-type(3){ background-color: #1966FF !important; } [class*=cbResultSetHeaderCell]:nth-child(4) { background: #cc0000 !important; } td[class*="cbResultSetData"]:nth-of-type(4){ background-color: #E60000 !important; } [class*=cbResultSetHeaderCell]:nth-child(5) { background: #cc0000 !important; } Here is the result of this code: Clearly, the highlight works as it applies to uncolored columns. How do I alter the code so that the highlight is prioritized and will override any existing color?
  15. I'd like to have different colors for some of my column headers so that I can group them together. How can I do this?
  16. I want to change the color of an entire column. No conditionals necessary.
  17. I have a search and report datapage that when deployed on most Wordpress websites functions properly. On one wordpress website that uses (Theme X) the radio buttons are not displaying on the same line. In the datapage it is set to display "multiple options per line". The hint images are also displaying on the line under the label. I believe I need to enter custom css into the style in order to make the radio buttons display multiple options per line and the hint images to stay on the same line. What css can be used? Here is the app functioning with the issues when deployed: https://www.mtpca.org/behavioral-health-directory/ Here is the app functioning properly when deployed: https://wimtracking.com/thebrightapp/
  18. Hello guys, Hope you are doing well. Please can any help me to center my image in website because i tried a lot i used margin auto 0px too? any one does have any solution to center my image?
  19. I know that there are jquery tools used to completely customize standard form elements such as checkboxes, radio buttons, and dropdown menus. Are there any scripts and ways of styling them in Caspio? If so, what's the easiest way to go about doing it?
  20. I tried to hide my Search button with this code in the Header of my DataPage: <style> .cbSearchButton{ display:none !important; } .cbSearchButtonContainer{ display:none !important; } </style> And it works except when I deploy the embedded script in WordPress, the search button reappears.
  21. Hi Is there a way of modifying data labels in a pie chart? I want to have a red glow on the text 2 and 4 or change font size.
  22. I have a chart and I need some more space between its axis title and the drawing itself. However, I cannot see any option to customise that.
  23. My company's website is now going to a completely responsive front end, but currently none of the Caspio forms on our site work this way. I'm wondering id there are any others who are facing a smilier problem and if there is a solution available. I understand that Caspio forms are not responsive out of the box, but can they made to be? Philip
  24. I have submission form and when i put label position = left. the field/form element (could be a textfield, dropdown etc) will appear to the far right. Example: Expected result I am looking for Brand Type: <text field> What I see on caspio form Brand Type: <text field> How do I reduce the spacing between label and form element? I don't know where in the style is controlling the spacing. I need the table or container to be 100% as my page is suppose to be responsive page. Can anyone help?
  25. Good day. I have a display where I use the Totals & Aggregation Count function to total records. I would like to only display the rows where the total is greater that 1. Caspio expert session indicates that this can be done via Javascript. Any help would be much appreciated, thank you. Colin Hancox
  • Create New...