How to create multi-column data entry form using CSS in Asp.Net?
Tags: asp.net,css,forms,data-entry
Problem :
While converting a desktop application to a web app, I've run across my ignorance when attempting to implement a multi-column data entry form using CSS. I'm resolved to avoid using tables for this type of thing, and while I found a good reference to laying out a data entry form, I can find nothing that applies to multiple-column layouts like this one:
Can anyone point me in the right direction?
Solution :
Here's a screen shot, please notice how I demonstrated the tab order with numbers:
Please note that RedFilter's
answer has a different tab order, which I have demonstrated in the screenshot below:
(code below complete with ASP.NET validators)
CSS (cross browser friendly)
p
{
margin:1em 0;
}
label
{
float:left;
width:5em;
text-align:right;
margin-right:0.5em;
}
input[type="text"]
{
width: 10em;
}
.left-column, right-column
{
float:left;
}
.left-column
{
margin-right:1em;
}
.textarea-label
{
float:none;
}
textarea
{
height:5em;
width:35em;
}
HTML
<div class="left-column">
<p>
<label for="tbDepartment">Department:</label>
<asp:TextBox ID="tbDepartment" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlToValidate="tbDepartment"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbFund">Fund:</label>
<asp:TextBox ID="tbFund" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlToValidate="tbFund"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbProgram">Program:</label>
<asp:TextBox ID="tbProgram" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlToValidate="tbProgram"> *</asp:RequiredFieldValidator>
</p>
</div>
<div class="right-column">
<p>
<label for="tbProject">Project:</label>
<asp:TextBox ID="tbProject" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlToValidate="tbProject"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbSpeedKey">Speed Key:</label>
<asp:TextBox ID="tbSpeedKey" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlToValidate="tbSpeedKey"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbAward">Award:</label>
<asp:TextBox ID="tbAward" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlToValidate="tbAward"> *</asp:RequiredFieldValidator>
</p>
</div>
<div>
<p>
<label class="textarea-label" for="taProjectDesc">Project Description:</label>
</p>
<p>
<asp:TextBox ID="taProjectDesc" runat="server" TextMode="MultiLine" />
<asp:RequiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlToValidate="taProjectDesc"> *</asp:RequiredFieldValidator>
<p>
</div>
CSS Howto..
You would use word-break: break-all to achieve this. EXAMPLE HERE span { word-break: break-all; } ...
Easiest solution is to split the table into multiple tables and put the divs between them, or include each div in a separate row inside the table where you want...
As you can see in my fork of your fiddle, you just need to set up your function as a handler for the scroll event. Also, different browsers have different...
Here is pure css approach with transition on hover #div1 { width: 300px; height: 300px; border: 2px black solid; position: relative; overflow: hidden; } #div2 img { position: absolute; top:...
try body {padding:0; margin:0; background-color:#000; } ...
Yes, the leading used in Photoshop behaves differently from the line-height in CSS. You can use some CSS trickery to produce identical results: p { font-size: 20px; line-height: 1; /*...
It is not possible in CSS to find the content inside innerHTML. But it is possible to search a string for HTML tag attribute values. For example: a[href*='google.com'] { color:...
There is not an easy way to do this. You could integrate some kind of control panel with PHP and SQL, but that's about it.
On the Style ∇ tab, click the down arrow ∇ and select Only Show Applied Styles
jQuery selectors us the same syntax as CSS does, so you can just use the :enabled pseudo-class selector: if ($('#sectionA:enabled')) { ... } But, after reading your comments, I'm not...
It is not easy to understand what you are trying to achieve here without the actual images. I have reproduced your case here: http://jsfiddle.net/gVQ8x/1/ I've just set percentage width here...
You can animate it quite easily with CSS using the following: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 50%; } } and by adding...
Here is a CSS only solution using pseudo element. This solution will adjust to the width of the page when resized. ul, li { list-style: none; } li { float:...
you have to declare each: input[type=text]:hover, input[type=password]:hover, input[type=number]:hover { background-color: red; } FIDDLE...
outline: black 3px solid; Outline will draw a line outside the element....
Use the ID selector. CSS: input { background-repeat:repeat-x; border: 0px solid; height:25px; width:125px; } #firstname { background-image:url('images/fieldBG.gif'); } #lastname { background-image:url('images/fieldBG2222.gif'); } HTML: <input type="text" ID="firstname" name="firstName" /> <input type="text"...
If you give the first li of each new row a class with the CSS of "clear:both", it should work. Check this out and see if it's what you're looking...
You can try #minPrice .ui-combobox-input { width:400px; } #maxPrice .ui-combobox-input { width:300px; } #beds .ui-combobox-input { width:200px; } #baths .ui-combobox-input { width:100px; } ...
Try flexbox. See example fullpage http://codepen.io/rhroyston/full/qadGgd/ html, body { height: 100%; margin: 0; } #viewport{ height:100%; display: flex; align-items: center; justify-content: center; z-index: 1; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .a{...
If I understand correctly, I think you want the "hover" properties to be applied to the boxes when the user hovers over the corresponding text. This can't be completed in...
Bootstrap 3 has a new 'nav-justified' class for this purpose. No extra CSS required: <div class="container"> <h3 class="text-muted">Project name</h3> <ul class="nav nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a...
You can check below code it will work for you $('ul > li > a').click(function () { $('#all_contents >div').hide(); var $this = $(this); var target = $this.attr('href'); $(target).show(); return false;...
Check out my example here http://jsfiddle.net/z8gph/ Unless I have your exact setup this is the closest I can get to answering your question. First position the outer and inner containers...
The answer to the second part of the question is to add padding to ol.bjqs-markers li{display:inline;} As shown here: http://jsfiddle.net/uYXkA/ I will answer the first part after the OP posts...
This answer does the trick: $("#knd").click(function () { var KND = $("#kndpopup"); var GUILDINFO = $("#guildinfo"); if ((KND).is(':visible')) { $(KND).fadeOut(); } else if ((GUILDINFO).is(':visible')) { $(GUILDINFO).fadeOut(); $(KND).fadeOut(); } else {...
Presumably you mean that below 520px you'd like them to be stacked vertically, but otherwise side-by-side? I would do this instead of floating. (It should be noted that you have...
Position:absolute on the up vote. And position: relative on the wrapper. Then the up vote will be positioned relative to its container. So you can give the up vote a...
I've done it several times earlier. Main thing is to add link to stylesheet (which is on your server). If i remember correct, you can add it where HTML for...
You need to include CSS on your page, either by embedding it in the <head> or by linking to an external stylesheet. <!DOCTYPE html> <html> <head> <!-- external CSS -->...
Thank you all for your help. I ended up creating the below method to grab the percentage. protected void verifyProgressMeter(int expectedpercentage) { String progress1 = driver.getSingleElement(AppObjects.ProgressMeter).getAttribute("style"); String progresswidth = progress1.substring(progress1.indexOf("width:")...