Solved

HTML select box issue

Posted on 2014-02-20
9
424 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
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 
LVL 54

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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap show icon when mobile text when computer or tablet 3 41
MouseOver help for Intranet website 2 26
Scroll 5 news at a time. 4 28
Why a span is lower 2 21
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.
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 learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

803 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