We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Need help in formatting this HTML form

aman0711
aman0711 asked
on
Medium Priority
334 Views
Last Modified: 2012-05-07
Hi Experts,
                   I need help in formatting an HTMl form to look exactly the same like the snap shot.
                   Can you please help me in achieving this.

                   I have attached my current code, current out and desired output.
       
<style type="text/css">
 .tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
</head>
</body>
 
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
 
 <form:form commandName="detailForm" method="GET">
<div style="font-weight:bold; color:#000">Report Group:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="chartGroup" items="${chartGroups}" /></div>
</div>
 
<div style="font-weight:bold; color:#000">Report SubGroup:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="chartSubgroup" items="${chartSubgroups}" /></div>
</div>
 
<div style="font-weight:bold; color:#000">Chart Type:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="chartType" items="${chartTypes}" id="ct"/></div>
</div>
 
<div style="font-weight:bold; color:#000">Timeline</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timelines}" id="tm"/></div>
</div>
 
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
<form:input path="startDt" id="from_date" size="7" maxlength="8" />
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
<form:input path="endDt" id="to_date" size="7" maxlength="8" />
</div>
 
<div style="font-weight:bold; color:#000">Customer Type</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="liabilityCode" items="${liabilityCodes}" id="tm"/></div>
</div>
 
 
 
<h5 style="padding:0 30px 10px 0; font-size:9px; font-wight:lighter; background:white; ">
<div style="width:40px; font-size:.8em; font-weight:lighter;">
<input type="submit" value="Update Chart" />
</div>
</h5>
 
<div style="clear:both;"></div>
</form:form>

Open in new window

View-Detail-Toolbar.PNG
Current.PNG
Comment
Watch Question

erikTsomikSystem Architect, CF programmer
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
Hey Erik,

                This didnt make any difference :(

Current.PNG
I think you should use labels and fieldset and CSS to style the form. i have done something simple which you can modify.

Good luck.

MD
<style type="text/css">
#form{
 
		margin:1em 0;
 
		color:#000000;
 
		width:300px;
		 /* customize width, this form have fluid layout */
 
		}
		
		#form h3{
 
		margin:0;
 
		background:#57a700 url(../images/form2/form_heading.gif) repeat-x;		
 
		color:#fff;
 
		font-size:20px;
 
		border:1px solid #57a700;
 
		border-bottom:none;
 
		}		
 
 
 
#form fieldset{
 
		margin:0;
 
		padding:10px;
 
		border:none;	
 
		border-top:3px solid #FFF;
 
		background:#FFFFFF;	
 
		padding-bottom:1em;
 
		}		
		
		#wrapper
		{
			background:#666;
			border:solid 1px #fff;
			
			width:300px;
 
			padding:15px;
			/*overflow:auto;*/
			color:#FFFFFF;
			
			
/*			font-weight:bold;*/
	}
</style>

Open in new window

Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
thnx :)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.