Post Travel Expense using Tables

by clayshannon

HTML

<h2 class="underline">UCSC POST TRAVEL EXPENSE</h2>

<label>Form Filled Out:</label>
<input type="date" style="width=100px" />
<label>Access the <a href="https://financial.ucsc.edu/Pages/travel_guide.aspx#Travel_Expense_Report" target="_blank">Post Travel Guide</a> for reimbursement validation</label>
<br/>
<table align="left" width="39%" border="0">
    <tr>
        <td>
            <label class="firstblocklabel">Traveler's name:</label>
            <input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial"/>
        </td>
    </tr>
    <td>
        <label class="firstblocklabel">Traveler's E-mail:</label>
        <input class="firstblockinput" type="email" id="traveleremail" />
    </td>
    <tr>
        <td>
            <label class="firstblocklabel">Traveler's Phone:</label>
            <input class="firstblockinput" type="tel" id="travelerphone" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="firstblocklabel">Traveler's Mail Stop:</label>
            <input class="firstblockinput" type="text" id="travelermailstop" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="firstblocklabel" id="travelerstreetorpoboxlabel">Traveler's Street or P.O.:</label>
            <input class="firstblockinput" type="text" id="travelerstreetorpobox" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="firstblocklabel">Traveler's Destinations:</label>
            <input class="firstblockinput" type="text" id="travelersdestinations" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="firstblocklabel">UC Business Purpose:</label>
            <input class="firstblockinput" type="text" id="ucbusinesspurpose" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="firstblockdatelabel">Departure Date:</label>
            <input class="dateinput" type="date" id="travelersdeparturedate" />
            <label>Time:</label>
       ...

CSS

.underline {
    text-decoration: underline;
}
input[placeholder] {
    font-size: 0.6em;
    width: 500;
}
.firstblocklabel {
    width: 120px;
    display: inline-block;
    margin: 2px;
}
.firstblockdatelabel {
    width: 108px;
    display: inline-block;
}
.firstblockinput {
    width: 224px;
}
.secondblocklabel {
    width: 120px;
    display: inline-block;
    margin: 2px;
}
.thirdblocklabel {
    width: 90px;
    display: inline-block;
    margin: 2px;
}
.dateinput {
    width: 124px;
    margin: 2px;
}
.timeinput {
    width: 100px;
}
form {
    display: inline-block;
    vertical-align:top;
    //float: left;
}
.borderedform {
    border: 1px solid;
    margin: 1em;
    padding: 1em;
}
.reditalics {
    color: red;
    font-style: italic;
}
.wrappedlabel {
    width: 320px;
    display: block;
}
.no-border {
  border: none;
}

JavaScript

//$('[id$=travelerstreetorpobox]').slideUp();
//$('[id$=travelerstreetorpoboxlabel]').slideUp();
// Unfortunately, the upsliding leaves a vertical gap; may need to combine them into one set of label/input
//var travname = $('[id$=travelername]');
//travname.width(196);