Solved

HTML select box issue

Posted on 2014-02-20
9
414 Views
Last Modified: 2014-02-21
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
Comment
Question by:cofactor
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39873292
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
 

Author Comment

by:cofactor
ID: 39873321
>>>Change type "hidden"
I want to keep that hidden.
0
 
LVL 29

Expert Comment

by:Paul Jackson
ID: 39873358
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
 
LVL 52

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 total points
ID: 39873495
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

Assisted Solution

by:Carl Tawn
Carl Tawn earned 300 total points
ID: 39873506
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
 

Author Comment

by:cofactor
ID: 39876070
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
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 300 total points
ID: 39876192
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
 

Author Comment

by:cofactor
ID: 39876253
Thanks. that helped.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Unwanted gap in IE11 between header and menu 9 19
Problem with a CSS in a page 2 25
CSS z-index issue 3 15
Wrapper for APPs 9 25
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now