•  23-07-2023
  •  | 
  •  

Frage

I'm trying to make a "Pad" but I'm completely lost as to how to do so.

If you go to the Fiddle you see "Content" is padded. This is on purpose, I know how to do this with a table.

However, with the javascript including portion I found that if I included a table everything is shown regardless of the script and div tags, which isn't what I want.

What I need is to find a way to pad the section that is after "Content" so it aligns. Maybe I'm constructing the table incorrectly, at this point I'm more curious as to how one would do so without using tables in HTML.

Any and all help is greatly appreciated.

Javascript:

function selection(){
    var myEvaluator = addendaList.options[addendaList.selectedIndex].value;
    var referenceNumberId = document.getElementById("referenceNumberBlock");
    var deliveryIdentificationId = document.getElementById("deliveryIdentificationBlock");
    var currencyISOCodeId = document.getElementById("currencyISOCodeBlock");
    var referenceTrafficId = document.getElementById("referenceTrafficBlock");

    if( myEvaluator == "IMP" ) {
        referenceNumberId.style.display         = "block";
        deliveryIdentificationId.style.display  = "block";
        currencyISOCodeId.style.display         = "none";
        referenceTrafficId.style.display        = "none";
    } else if ( myEvaluator == "EXP" ) {
        referenceNumberId.style.display         = "none";
        deliveryIdentificationId.style.display  = "none";
        currencyISOCodeId.style.display         = "block";
        referenceTrafficId.style.display        = "block";
    }
}

HTML

<body>
<table width="620" align="center" cellpadding="0" cellspacing="0">
    <td width="160" valign="top">
        <b>Content</b>
    </td>
</table>

    <b>Select an option:  </b>
    <select name = "code" id = "addendaList" onChange = "select()">
        <option value = "IMP">Import</option>
        <option value = "EXP">Export</option>
    </select>

    <div ID = "referenceNumberBlock" style = "display:block;">
        <b>Reference Number: </b>
            <input name = "referenceNumber" id = "referenceNumber" type = "text" size = "16" maxlength="15" value = "">
    </div>

    <div ID = "deliveryIdentificationBlock" style = "display:block;">
        <b>Delivery Identification: </b>
            <input id = "deliveryIdentification" name = "deliveryIDentification" type = "text" size = "16" maxlength = "30" value = "">
    </div>

    <div ID = "currencyISOCodeBlock" style = "display:none;">
        <b>Currency ISO Code: </b>
             <select id = "ISOCodes" name = "currencyISOCode">
                 <option value = "MXN">MXN</option>
                 <option value = "USD">USD</option>
             </select>
    </div>

    <div ID = "referenceTrafficBlock" style ="display:none;">
        <b>Traffic Number: </b>
            <input name = "referenceTraffic" type = "text" size = "16" maxlength = "20" value = "">
    <div>
</body>

Fiddle: http://jsfiddle.net/tL98L/4/

Updated Fiddle with it solved: http://jsfiddle.net/tL98L/18/

War es hilfreich?

Lösung

Surround everything you want to pad with a <div class="wrapper"> and add this to your css: 

.wrapper { padding-left: 15px }

That should work

Andere Tipps

hi Erick can u please try the below code if any thing else you need then please let me know.

<style type="text/css">
    #mydata tr td
    {
        padding-left:5px;
    }
    #mydata tr td:first-child
    {
        text-align:right;
    }
    #mydata input[type="text"]
    {
        width:170px;
        height:27px;        
    }
    select
    {
        width:179px;
        height:33px;
    }
    #mydata input[type="text"] , select
    {
        padding-left:5px;
    }

    </style>


<div>
<table id="mydata">
<tr>
<td>Select an Option:</td>
<td>
<select name = "code" id = "addendaList" onChange = "select()">
        <option value = "IMP">Import</option>
        <option value = "EXP">Export</option>
    </select>
</td>
</tr>
<tr>
<td>Reference Number:</td>
<td><input name = "referenceNumber" id = "referenceNumber" type = "text" size = "16" maxlength="15" value = ""></td>
</tr>
<tr>
<td>Delivery Identification:</td>
<td><input id = "deliveryIdentification" name = "deliveryIDentification" type = "text" size = "16" maxlength = "30" value = ""></td>
</tr>
</table>
</div>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top