?
Solved

HTML select box issue

Posted on 2014-02-20
9
Medium Priority
?
476 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
8 Comments
 
LVL 54

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 400 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 1200 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 1200 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

864 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