• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 493
  • Last Modified:

HTML select box issue

HTML select box not visible.  Can you please tell what is the issue in this code ?  how to fix it ?

code  and expected output image is attached.
code.zip
0
cofactor
Asked:
cofactor
3 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your full code for those that do not want to open up a zip file is below.

Change type "hidden"
        <input type="hidden" id="creditLedgerName" value="" name="faHamaliExpenseTo.creditLedgerName">

to type="text"

        <input type="text" id="creditLedgerName" value="" name="faHamaliExpenseTo.creditLedgerName">



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 12px;" class="TABLE">
     			<tbody><tr>
										<td width="15%" colspan="2"><u>Payment Mode </u><span class="mandatoryField">*</span></td>
										<td width="25%">Amount</td>
										<td width="60%" colspan="2"></td>
									</tr>
     			<tr>
				    <td width="2%"><input type="checkbox" onclick="enableCashBox();" id="cashCheckbox" value="true" name="faHamaliExpenseTo.cash">
<input type="hidden" value="true" name="__checkbox_faHamaliExpenseTo.cash" id="__checkbox_cashCheckbox"> </td>
					<td width="17%">Cash <span class="mandatoryField cashMandatory" style="display: none;">*</span></td>
					<td width="21%"><input type="text" onblur="populateTotalPayment();" style="width:90%;border:1px #000 solid;" class="numeric" id="cashAmount" disabled="disabled" value="" name="faHamaliExpenseTo.cashAmount"></td>
					
					<td width="15%"></td>
					<td width="45%"></td>
				</tr>
				<tr>
					<td width="2%"><input type="checkbox" onclick="enableChequeBox();" id="bankCheckBox" value="true" name="faHamaliExpenseTo.cheque">
<input type="hidden" value="true" name="__checkbox_faHamaliExpenseTo.cheque" id="__checkbox_bankCheckBox"> </td>
					<td width="17%">Cheque <span class="mandatoryField chequeMandatory" style="display: none;">*</span></td>
					<td width="21%"><input type="text" onblur="populateTotalPayment();" style="width:90%;border:1px #000 solid;" class="numeric" id="chequeAmount" disabled="disabled" value="" name="faHamaliExpenseTo.chequeAmount"></td>
					
					<td width="15%"></td>
					<td width="45%"></td>
				</tr>
				<tr>
			      <td width=""><input type="checkbox" name="creditCheckBox" onclick="enableCreditBox();" id="creditCheckBox"></td>
			      <td width="">Credit To: <span class="mandatoryField creditMandatory" style="display: none;">*</span></td>
			      <td width=""><input type="text" onblur="populateTotalAmount();" style="width:90%;border:1px #000 solid;" class="TEXTBOX" id="creditAmount" disabled="disabled" value="" name="financeExpenseVoucherTO.creditAmount">
			      
			      </td>
			      <td width=""></td>
			      <td width="">Credit Ledger: <span class="mandatoryField creditMandatory" style="display: none;">*</span></td>
			      <td>
			      	<select style="width:90%;border:1px #000 solid;" id="creditSelect" disabled="disabled" name="faHamaliExpenseTo.creditLedgerId">
    <option value="-1">Please Select</option>
    <option value="31514">Books &amp; Periodicals Exp.</option>
    <option value="31515">Chandlo Exp.=Staff / Clients</option>
    <option value="31516">Cleaning Materials Exp.</option>
    <option value="31518">Dxcfg Boni Exp.</option>
    <option value="31519">Dxcfgw3 Exp.</option>
    <option value="31522">Water Exp.</option>
    <option value="31520">Godown Exp.</option>
    <option value="31523">Ice Exp.</option>
    <option value="31521">Local Festival / Religion Exp.</option>
    <option value="31524">Night Halt Exp.</option>
    <option value="31526">Office Exp.</option>
    <option value="31529">Office Inauguration / Opening Exp.</option>
    <option value="31531">Dxcfgtt Exp.</option>
    <option value="31530">hgjklr Exp.</option>


</select>

			      	<input type="hidden" id="creditLedgerName" value="" name="faHamaliExpenseTo.creditLedgerName">
			      </td>
      			</tr>
				
  				<tr>
					<td width="19%" colspan="2">Total Payment</td>
					<td width="21%"><input type="text" style="width:90%;border:1px #000 solid;" class="TEXTBOX" id="totalPayment" readonly="readonly" value="" name="faHamaliExpenseTo.totalPayment"></td>
					<td width="15%"></td>
					<td width="45%"></td>
				</tr>
			</tbody></table>
 </BODY>
</HTML>

Open in new window

0
 
cofactorAuthor Commented:
>>>Change type "hidden"
I want to keep that hidden.
0
 
Paul JacksonSoftware EngineerCommented:
remove the empty column before the Credit Ledger column :

                        <tr>
			      <td width=""><input type="checkbox" name="creditCheckBox" onclick="enableCreditBox();" id="creditCheckBox"></td>
			      <td width="">Credit To: <span class="mandatoryField creditMandatory" style="display: none;">*</span></td>
			      <td width=""><input type="text" onblur="populateTotalAmount();" style="width:90%;border:1px #000 solid;" class="TEXTBOX" id="creditAmount" disabled="disabled" value="" name="financeExpenseVoucherTO.creditAmount">
			      
			      </td>
			      <td width="">Credit Ledger: <span class="mandatoryField creditMandatory" style="display: none;">*</span></td>
			      <td>
			      	<select style="width:90%;border:1px #000 solid;" id="creditSelect" disabled="disabled" name="faHamaliExpenseTo.creditLedgerId">
    <option value="-1">Please Select</option>
    <option value="31514">Books &amp; Periodicals Exp.</option>
    <option value="31515">Chandlo Exp.=Staff / Clients</option>
    <option value="31516">Cleaning Materials Exp.</option>
    <option value="31518">Dxcfg Boni Exp.</option>
    <option value="31519">Dxcfgw3 Exp.</option>
    <option value="31522">Water Exp.</option>
    <option value="31520">Godown Exp.</option>
    <option value="31523">Ice Exp.</option>
    <option value="31521">Local Festival / Religion Exp.</option>
    <option value="31524">Night Halt Exp.</option>
    <option value="31526">Office Exp.</option>
    <option value="31529">Office Inauguration / Opening Exp.</option>
    <option value="31531">Dxcfgtt Exp.</option>
    <option value="31530">hgjklr Exp.</option>


</select>

			      	<input type="hidden" id="creditLedgerName" value="" name="faHamaliExpenseTo.creditLedgerName">
			      </td>
      			</tr>

Open in new window

0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Julian HansenCommented:
Remove the element styel width:90%;

<select style="width:90%;border:1px #000 solid;" id="creditSelect" disabled="disabled" name="faHamaliExpenseTo.creditLedgerId">

Open in new window

becomes

<select style="border:1px #000 solid;" id="creditSelect" disabled="disabled" name="faHamaliExpenseTo.creditLedgerId">

Open in new window

0
 
Carl TawnSystems and Integration DeveloperCommented:
Your problem lies in the fact you have no sizing information on your table, so there is no reference for the "90%" width specified on the select. Remove the width:90% style from the select and it should appear.
0
 
cofactorAuthor Commented:
The solution worked fine.  I removed  width:90%;   and it  worked !..........But I failed to understand the concept.

Can anyone please explain this comment ?

Your problem lies in the fact you have no sizing information on your table, so there is no reference for the "90%" width specified on the select.


You know I already have sizing information on table ! ..see  table width=100% ......  

ummm....did you mean I  don't have no sizing information on the td which holds select box ?

Please clarify.
0
 
Carl TawnSystems and Integration DeveloperCommented:
Yes, i meant there was no sizing in the TD elements. You had 90% width on the select, but without specifying a size for the parent TD, there was no frame of reference for that 90%. And because you set the SELECT to be 90% of it's parent, the table didn't take the width of the SELECT into account when sizing its TD elements.

Hope that makes sense.
0
 
cofactorAuthor Commented:
Thanks. that helped.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now