<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="2" style="text-align:center; color: white; background-color:#295f89;">Hydrant Information</th> </tr> </thead> <tbody> <tr> <td>ID: <input class="form-control transparent-input" type='text' name='ID' required></td> <td>Description: <input class="form-control transparent-input" type='text' name='description' required></td> </tr> <tr> <td>Location: <input class="form-control transparent-input" type='text' name='ID' required></td> <td>Operational Status: <input type="radio" style="display:inline;width:20px"/> In Service <input type="radio" style="display:inline;width:20px"/> Out of Service </td> </tr> <tr> <td>Manufacturer: <input class="form-control transparent-input" type='text' name='manufacturer' required></td> <td>Main Size: <input class="form-control transparent-input" type='text' name='mainSize' required></td> </tr> <tr> <td>Year: <input class="form-control transparent-input" type='text' name='year' required></td> <td>Model: <input class="form-control transparent-input" type='text' name='model' required></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="10" style="text-align:center; color: white; background-color:#295f89;">Visual Inspection Criteria</th> </tr> </thead> <tbody> <tr> <td colspan="10">Indicate yes or no and describe actions taken at the bottom of this form.</td> </tr> <tr> <td>Any landscape or obstacles within 3 feet? (if yes leave notice)</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="obstacles3feet" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="obstacles3feet" class="form-control" style="min-width: 20px;"></td> <td>Signs of damage, leakage or vandalism?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="signsdamage" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="obstacles3feet" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>Nozzle caps present?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="nozzlecaps" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="nozzlecaps" class="form-control" style="min-width: 20px;"></td> <td>Caps secured with chains?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="capssecured" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="capssecured" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>Inspection Passed?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="inspectionpassed" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="inspectionpassed" class="form-control" style="min-width: 20px;"></td> <td>Repair Needed?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="repairneeded" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="repairneeded" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>Drains Slow / Not at all?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="drainsslow" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="drainsslow" class="form-control" style="min-width: 20px;"></td> <td>Major Overhaul Needed?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="overhaulneeded" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="overhaulneeded" class="form-control" style="min-width: 20px;"></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="3" style="text-align:center; color: white; background-color:#295f89;">Maintenance Checklist</th> </tr> </thead> <tbody> <tr> <td>Indicate yes or no for work performed:</td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">No</td> </tr> <tr> <td>Exercise auxiliary valve</td> <td style="text-align:center;"><input type="radio" name="exercisevalve" class="form-control"></td> <td style="text-align:center;"><input type="radio" name="exercisevalve" class="form-control"></td> </tr> <tr> <td>Remove caps, clean, lubricate (with food grade greease) and replace (replcae gaskets as needed)</td> <td><input type="radio" name="removecaps" class="form-control"></td> <td><input type="radio" name="removecaps" class="form-control"></td> </tr> <tr> <td>Oil or grease stem (sependent on FY make and model)</td> <td><input type="radio" name="oilgreasestem" class="form-control"></td> <td><input type="radio" name="oilgreasestem" class="form-control"></td> </tr> <tr> <td>Install pressure gage and charge hydrant (ensure all caps are secure)</td> <td><input type="radio" name="installgage" class="form-control"></td> <td><input type="radio" name="installgage" class="form-control"></td> </tr> <tr> <td>Open hydrant slowly to full open position (exercise until easily operable)</td> <td><input type="radio" name="openhydrant" class="form-control"></td> <td><input type="radio" name="openhydrant" class="form-control"></td> </tr> <tr> <td>Check for FY seal leaks</td> <td><input type="radio" name="checkleaks" class="form-control"></td> <td><input type="radio" name="checkleaks" class="form-control"></td> </tr> <tr> <td>Is weep valve functional</td> <td><input type="radio" name="weepfunctional" class="form-control"></td> <td><input type="radio" name="weepfunctional" class="form-control"></td> </tr> <tr> <td>Conduct a minor flush to remove dirty water from FY barrel</td> <td><input type="radio" name="flushwater" class="form-control"></td> <td><input type="radio" name="flushwater" class="form-control"></td> </tr> <tr> <td>Repair any damage to surrounding area</td> <td><input type="radio" name="repairdamage" class="form-control"></td> <td><input type="radio" name="repairdamage" class="form-control"></td> </tr> <tr> <td>Document any maintenance requirements below</td> <td><input type="radio" name="documentreq" class="form-control"></td> <td><input type="radio" name="documentreq" class="form-control"></td> </tr> <tr> <td style="text-align:right;">Pressire Reading (PSI):</td> <td colspan="2"><input class="form-control transparent-input" type='text' name='psi'></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <p>Problems identified:</p> <textarea rows="3" class="form-control"></textarea> </div> <div class="row" style="margin-top:20px;"> <p>Problems resolved:</p> <textarea rows="3" class="form-control"></textarea> </div> </div>

@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ .no-more-tables table, .no-more-tables thead, .no-more-tables tbody, .no-more-tables th, .no-more-tables td, .no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } .no-more-tables tr { border: 1px solid #ccc; } .no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } .no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ .no-more-tables td:before { content: attr(data-title); } } input.transparent-input { border:none !important; border-bottom: dotted 2px #c9c9c9 !important; } .transparent-input { background-color: rgba(0, 0, 0, 0); border:none; border-bottom: dotted 2px #c9c9c9 !important; box-shadow:none !important; display: inline-block; width:50%; } input.transparent-input{ background-color:rgba(0,0,0,0) !important; border:none !important; border-bottom: dotted 2px #c9c9c9 !important; } td input[type="radio"] { display: block; margin: auto; width: 20px; }