•  23-07-2023
  •  | 
  •  

سؤال

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/

هل كانت مفيدة؟

المحلول

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

.wrapper { padding-left: 15px }

That should work

نصائح أخرى

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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top