Solved

HTML select box issue

Posted on 2014-02-20
9
439 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

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
 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Technology Resume 7 71
email validation 9 51
Send email using HTML and PHP in separate file 5 41
Hta File displays dynamic File names 4 51
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

730 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