Discussions

Expand all | Collapse all

HTML formatting issue on a code page

  • 1.  HTML formatting issue on a code page

    Posted 10-28-2020 15:35
      |   view attached
    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 be collapsible for better use of the real estate.  My problem is I am getting the underlines for the hyperlinks to still show and I cannot seem to get rid of them.  Must be something with my css so hoping someone can help me here.  Below is the code and I also uploaded a screenshot:

    <!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;
    }

    .button-row:hover {
    background-color: #3eb1c8;
    color: white;
    }

    .button-row a {
    color:white;
    text-decoration: none;
    }

    .reports-table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 70%;
    margin-left:15%;
    margin-right: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"><a href="https://elitestudioe.quickbase.com/db/bpmnebm3f?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Company</button>
    <button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmnei9mh?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Contact</button>
    <button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bqmxz7abt?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Note</button>
    <button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Project</button>
    <button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Task</button>
    <button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bprnnztku?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Marketing Request</button>
    <button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bp7q4pxw8?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Policy & Procedure</button>
    </center><br>
    <table class="reports-table">
    <tr>
    <th>Financial Reports </th>
    <th>Sales Reports </th>
    <th>Scheduling </th>
    <th>Tasks </th>
    </tr>
    <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>
    </table>

    </body>
    </html>

    ------------------------------
    Ivan Weiss
    ------------------------------


  • 2.  RE: HTML formatting issue on a code page

    Posted 10-28-2020 16:33
    Nevermind I rewrote a bunch of the css and figured it out!  Had to do with the combo of button and links which was a mistake so now that I have the buttons right on the opening row much better!

    ------------------------------
    Ivan Weiss
    ------------------------------



  • 3.  RE: HTML formatting issue on a code page

    Posted 10-29-2020 10:00
    Can you post your solution?  Thanks!

    ------------------------------
    Jake R
    ------------------------------



  • 4.  RE: HTML formatting issue on a code page

    Posted 25 days ago
    Edited by Ivan Weiss 25 days ago
    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
    ------------------------------