Cherry

Hi @Tubby, thank you for the solution. I changed the code but it is not working. The button itself is not working.

Hi Everyone, I added a print this page button. I customized the style. It is working, but the Print this Page text still visible under the Print Page Window. How to get rid of the PDF Text? Please see attached screenshots. Thanks a lot. -Cherry Below is the styling and script I used. <style> button { background-color: blue; border: none; color: white; padding: 8px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius:4px; } </style> <!-- -- PRINT BUTTON---> <div style="margin-left: 330px; margin-top: 10px; margin-bottom: 10px;"> <button onclick="window.print()">PDF</button> </div> <!-- -- SCRIPT---> <script type="text/javascript"> function printpage() { //Get the print button and put it into a variable var printButton = document.getElementById("printpagebutton"); //Set the print button visibility to 'hidden' printButton.style.visibility = 'hidden'; //Print the page content window.print() //Set the print button to 'visible' again //[Delete this line if you want it to stay hidden after printing] //printButton.style.visibility = 'visible'; } </script>

@BarryThank you so much Barry. I will try to add the code.

@NailDyanC thank you for the suggestion, I tried this but it is invalid.

Hi everyone, I need some help on this, I am not an expert in HTML. I have an HTML. Inside my page, I added a textbox with a link. Currently, the code that I added is a fixed width. How can expand the width of a textbox with a link according to how many characters? And also, how can I add space between boxes? I will attach the code currently I am using. Please see the attached screenshots. Thanks. -Cherry ___________________________________________ This is the code I am using now, <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Navbar with Dropdowns</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <style> /************** ------HOME SECTION------******************/ .home-section{ position: relative; background: #ffffff; min-height: 100vh; width: calc(100% - 180px); left: 180px; transition: all 0.5s ease; } .sidebar.active ~ .home-section{ width: calc(100% - 60px); left: 60px; } .home-section nav{ display: flex; justify-content: space-between; height: 80px; background: #fff; display: flex; align-items: center; position: fixed; width: calc(100% - 180px); left: 180px; z-index: 100; padding: 0 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); transition: all 0.5s ease; } .home-section .home-content{ position: relative; padding-top: 104px; } /************** HOME CONTENT TEXT BOXES ***********************/ .home-content .overview-boxes{ display: flex; align-items: center; justify-content: none; flex-wrap: wrap; padding: 0 20px; margin-bottom: 26px; margin-top: 20px; } .overview-boxes .box{ display: flex; align-items: center; justify-content: center; width: calc(50% / 3 - 10px); background: #c5cdfe; padding: 5px 1px; border-color: #747474; border-width: 10px !important; border-radius: 6px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .overview-boxes .box-topic{ font-size: 17px; font-weight: 300; } .home-content .box .text_a{ display: inline-block; font-size: 30px; margin-top: -6px; font-weight: 500; } .home-content .box .indicator{ display: flex; align-items: center; } .home-content .box .indicator i{ height: 20px; width: 20px; background: #8FDACB; line-height: 20px; text-align: center; border-radius: 50%; color: #fff; font-size: 20px; margin-right: 5px; } .box .indicator i.down{ background: #e87d88; } .home-content .box .indicator .text{ font-size: 12px; } .home-content .box .right{ display: inline-block; font-size: 23px; height: 37px; width: 50px; background: #cce5ff00; line-height: 50px; text-align: center; border-radius: 12px; margin: -15px 0 0 0px; } </style> </head> <body> <div class="home-content"> <div class="overview-boxes"> <!-- BOX 1 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="https://c8ebv223.caspio.com/dp/ed40c000559c6581684c4821bb00" target="_self">New Employee</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 2 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Previous Employees</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 3 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Employee's Management</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> </div> </div> <!--********************** TEXT********************** --> <span style="font-size:20px; font-color: #800000; font-family:'Poppins', sans-serif; margin-left: 20px; "> <strong>Payroll Staff </strong> </span> <!--******************************************** --> <div class="home-content"> <div class="overview-boxes"> <!-- BOX 4 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Everyone</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 5 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Office</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 6 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Engineers</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 7 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Sales</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 8 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Customer Service</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 9 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Service Hub</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 10 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Flash Monitoring</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX 11 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Aerotech</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> <!-- BOX12 --> <div class="box"> <div class="right-side"> <div class="box-topic"><a href="#" target="_self">Power</div> </div> <i class='bx bx-right-arrow-circle right' style='color:#007b83' > </i> </div> </div> </div> <!--********************** SCRIPT********************** --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Hi everyone, I added a print this page button into my form. This is the code. <div style="margin-left: 140px;"><button onclick="window.print()">Print this page</button></div> </div> It can print the page but it does not include the other contents like lines. Is there anyone who knows what shall I include on the code ?

Hi @CoopperBackpack, Thank you for the response. My answers for your questions. Yes, I need to display the data for each month It is only 1 field (Code Name) but as dropdown in my submission form. I only used Calculated Field to display separate in my report

Hi everyone, I need help on Caspio datapage report. I created a submission form for add record in which the user will select a date range together with a code name. The output is to add all the dates. This record has the same employee ID and employee name. How can I add all given date with same ID and Name? Please see details below. For example: Employee ID : 91QD5ABY Employee Name: Vince Dy Date: 11/1/2022 - 11/5/2022 Code Name Assigned: 01 Total Days: 5 Date: 11/6/2022 - 11/8/2022 Code Name Assigned: 03 Total Days: 3 Date: 11/9/2022 - 11/9/2022 Code Name Assigned: 01 Total Days: 1 Date: 11/10/2022 - 11/12/2022 Code Name Assigned: 04 Total Days: 3 Date: 11/13/2022 - 11/22/2022 Code Name Assigned: 05 Total Days: 10 Date: 11/23/2022 - 11/24/2022 Code Name Assigned: 11 Total Days: 2 Date: 11/25/2022 - 11/30/2022 Code Name Assigned: 07 Total Days: 6 Total Days in Period= 30 days Expected Output: 11/1/2022-11/30/2022 Thank you so much. Refer table. This is the submission form for Add Record. Current Output.

In my work order form, I have a task frequency using hourly or periodically method. When a task frequency is selected as hourly it will be due/expire with the selected option, send a notification to increase hours, then automatically produce a new work order ID. How can I create a task out this? Can someone has experienced this? Or can share ideas how it will work? Please refer on the attached images.

Hi @telly, thank you for the reply. But I think it is not the restriction I am looking for.

This is my workflow. a) Agency Administrator - Create a school and create tags for that specific school b) School Administrator - He can only view guest teachers tagged to his institution c) Guest Teacher - He can see the addresses of the institutions that he is tagged If you have sample coding or forum for this, I need some help. Thank you.

@Tubby, yeah did that..thank you so much for the reply

Hi Everyone, I need some help for my landing page. I used both Caspio and ID services for my Authentication. It seems only the Caspio and Google button are visible. You need to click first the Caspio button in order to see the email and password fields which kind of disturbing. How can I make the fields be visible instead of the Caspio button? Please see attached picture. Need help from you guys. Thank you. Cherry

Hi everyone, I customized my Datapage using the code of w3schools. When I tried to modify it, to change the background of the 'Title' it will not be change. This is my modified code. This is working, the only problem is the background of the 'Title'. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <!-- Sidebar --> <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar"> <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button> <a href="#" class="w3-bar-item w3-button">Search Database</a> <a href="#" class="w3-bar-item w3-button">Create New Record</a> <a href="#" class="w3-bar-item w3-button">Edit Record</a> <a href="#" class="w3-bar-item w3-button">Delete Record</a> <a href="#" class="w3-bar-item w3-button">Export Records</a> <a href="#" class="w3-bar-item w3-button">Help Menu</a> <a href="#" class="w3-bar-item w3-button">Support Menu</a> <a href="#" class="w3-bar-item w3-button">Create User Account</a> <a href="#" class="w3-bar-item w3-button">Log Off</a> </div> <!-- Page Content --> <div class="w3-teal"> <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button> <div class="w3-container"> <h1 style="text-align: center; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 27px; font-weight: bold; margin: 0px; padding: 1px 0px 0px 0px;">SECURITY ADMINISTRATOR MENU</h1> <h2 style="text-align: center; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: normal; margin: 0px; padding: 1px 0px 0px 0px;">Welcome, [@authfield:All_user_Roles_table_Name] </h2> <br> </div> </div> <img src="https://static.wixstatic.com/media/0bdded_ece8bd91962a4216a7919bce1293f21c~mv2.png" alt="Heart" style="width:100%"> <div class="w3-container"> <script> function w3_open() { document.getElementById("mySidebar").style.display = "block"; } function w3_close() { document.getElementById("mySidebar").style.display = "none"; } </script> </body> </html> ********Note********** I modified this in the inspection tab. This should be the output that I wanted. How can I add this code? Need help from the expert. Looking forward on your response. Thank you so much .w3-teal, .w3-hover-teal:hover { color: #fff!important; background-color: #061551!important; } Admin Login Page.txt

@Meekeee thank you. It's working..