HTML formatting issue on a code page
I am working on a code page to use as a widget on my dashboards for my users. My intention is to nest the quick action buttons and a nice table showing all of my reports to allow the entire think to ...
Forum Discussion
Can you post your solution? Thanks!
------------------------------
Jake R
------------------------------
------------------------------
Jake R
------------------------------
Sure, here you go! My users are thrilled with it. I also posted the final screenshot as I added some formatting ot make it look a bit better
<!DOCTYPE html>
<html>
<head>
<style>
.button-row {
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #009ace;
border-radius: 5px 5px 5px 5px;
}
.button-row:hover {
background-color: #3eb1c8;
color: white;
}
.reports-table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 70%;
margin-left:15%;
margin-right:15%;
border-radius: 10px 10px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.reports-table td, .reports-table th {
border: 1px solid #ddd;
padding: 8px;
}
.reports-table tr:nth-child(even){background-color: #f2f2f2;}
.reports-table td:hover {background-color: #ddd;}
.reports-table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #e89923;
color: white;
}
.reports-table td {
font-size: 14px;
}
.reports-table a:link, .reports-table a:visited {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<center>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmnebm3f?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Company</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmnei9mh?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Contact</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bqmxz7abt?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Note</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Project</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Task</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bprnnztku?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Marketing Request</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bp7q4pxw8?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Policy & Procedure</button>
</center><br>
<table class="reports-table">
<thead><tr>
<th>Financial Reports </th>
<th>Sales Reports </th>
<th>Scheduling </th>
<th>Tasks </th>
</tr></thead>
<tbody><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpqcqx84k?a=q&qid=5" target="_blank">Active Contracts</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=62" target="_blank">Ivan's Radar List</td>
<td><a href="https://elitestudioe.quickbase.com/db/bp64hriid?a=q&qid=5" target="_blank">Fabricators and Installers Schedule</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=12" target="_blank">My Task Calendar</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmsnx84?a=q&qid=8" target="_blank">Current Month Invoicing</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmncb6rr?a=q&qid=29" target="_blank">Opportunities Closing This Month</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=49" target="_blank">Installation Calendar</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=23" target="_blank">My Two Week Look Ahead</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmzzumc?a=q&qid=10" target="_blank">Non-Billable Charges</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmsxsau?a=q&qid=8" target="_blank">Open Order Balance</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bqnvc9nai?a=q&qid=5" target="_blank">Open Proposals</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=61" target="_blank">Project Value Alignment Report</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=35" target="_blank">Sales Goals</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=6" target="_blank">Sales Reports</td>
</tr></tbody>
</table>
</body>
</html>
------------------------------
Ivan Weiss
------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.button-row {
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #009ace;
border-radius: 5px 5px 5px 5px;
}
.button-row:hover {
background-color: #3eb1c8;
color: white;
}
.reports-table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 70%;
margin-left:15%;
margin-right:15%;
border-radius: 10px 10px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.reports-table td, .reports-table th {
border: 1px solid #ddd;
padding: 8px;
}
.reports-table tr:nth-child(even){background-color: #f2f2f2;}
.reports-table td:hover {background-color: #ddd;}
.reports-table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #e89923;
color: white;
}
.reports-table td {
font-size: 14px;
}
.reports-table a:link, .reports-table a:visited {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<center>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmnebm3f?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Company</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmnei9mh?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Contact</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bqmxz7abt?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Note</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Project</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Task</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bprnnztku?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Marketing Request</button>
<button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bp7q4pxw8?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Policy & Procedure</button>
</center><br>
<table class="reports-table">
<thead><tr>
<th>Financial Reports </th>
<th>Sales Reports </th>
<th>Scheduling </th>
<th>Tasks </th>
</tr></thead>
<tbody><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpqcqx84k?a=q&qid=5" target="_blank">Active Contracts</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=62" target="_blank">Ivan's Radar List</td>
<td><a href="https://elitestudioe.quickbase.com/db/bp64hriid?a=q&qid=5" target="_blank">Fabricators and Installers Schedule</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=12" target="_blank">My Task Calendar</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmsnx84?a=q&qid=8" target="_blank">Current Month Invoicing</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmncb6rr?a=q&qid=29" target="_blank">Opportunities Closing This Month</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=49" target="_blank">Installation Calendar</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=23" target="_blank">My Two Week Look Ahead</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmzzumc?a=q&qid=10" target="_blank">Non-Billable Charges</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmsxsau?a=q&qid=8" target="_blank">Open Order Balance</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bqnvc9nai?a=q&qid=5" target="_blank">Open Proposals</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=61" target="_blank">Project Value Alignment Report</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=35" target="_blank">Sales Goals</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=6" target="_blank">Sales Reports</td>
</tr></tbody>
</table>
</body>
</html>
------------------------------
Ivan Weiss
------------------------------
