ASP.NET tableless css forms - asp.net

I have to create a web form in ASP.NET.
this is my HTML:
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="label" AssociatedControlID="DropDownList1"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="label" AssociatedControlID="TextBox1"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="Label3" runat="server" Text="" AssociatedControlID="Button1"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
Is this the most customizable HTML code by CSS?
Do you usually write a different markup?

Your HTML looks fine to me. I wouldn't personally use all those divs but I also don't know your exact requirements.
Some people consider a a form to be a list and will code it as:
<ul>
<li>
<label ... />
<input ... />
</li>
</ul>
I don't do it this way and it depends on how you wish to describe your data.
Untimately your main consideration is how you want to describe the data you're marking up. What is the most semantic way and how does that fit in with how you want to style the data. Usually there's a middle ground if you've considered both things well.
I would also consider grouping your form fields logically using a <fieldset>. This will give you something extea to hook into with your CSS also.

We created wrapper controls that do pretty much what you described. Each of our server controls emits a div with a specified class, a label (if label text is set) and the control itself.
We've found this to be the absolute cleanest way to get the markup we want when it goes to the client; and it results in non-table forms.
We also have several classes defined such as "row", "shortRow", etc. that set the appropriate width of the outer div and others which control the label and control width.

Related

Asp.net Textbox displayed side by side

Hello guys I just started designing form with asp.net tags and would like to achieve what's on the image exactly. Thanks guy
If i understand you right, this is the code you need:
<asp:TextBox runat="server"></asp:TextBox><asp:TextBox runat="server"></asp:TextBox>
and the result:
Add some styles to make it pretty.
Blockquote
Here is the code with labels (you can also use asp labels):
<div style="display: inline-grid">
<asp:TextBox runat="server"></asp:TextBox><label>textbox1</label>
</div>
<div style="display: inline-grid">
<asp:TextBox runat="server"></asp:TextBox><label>textbox2</label>
</div>
and the result:
You can also put the style in the css.

Stopping Divs displaying across multiple cells in Excel

I am downloading a html document and opening it in excel, in order to create an spreadsheet from a table i have on a webpage by changing the content types to
System.Web.HttpContext.Current.Response.ContentType = "application/vnd.ms-excel"
System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename="excel.xls")
But i find that some of the rows in my excel are spread over multiple lines, due to the html in the rows themselves (such as line breaks and divs) [the table is created by a repeater and has some interactive components to allow editing etc]
I found here http://www.bennadel.com/blog/1095-Maintaining-Line-Breaks-In-An-HTML-Excel-File.htm how to stop line breaks from splitting over multiple rows, but after implementing this, there are still line breaks appearing in the excel.
Below is the td cell that is causing the splitting. Am i right in thinking it is the tag that is causing the splitting? Is there an equivilent solution for stopping tags from splitting, or would it be simpler to just have two different sections, one for when in the UI and one for when in excel?
<ItemTemplate>
<asp:CheckBox id="cbAdjust" runat="server" visible="false" /><br style="mso-data-placement:same-cell;"/>
<div id="divAdjustments" runat="server" >
<div id="divLicAdjust" runat="server" style="mso-data-placement:same-cell;" >
License: <asp:Label id="lblAdjustLic" runat="server" text='1' />
</div>
<div id="divSaasAdjust" runat="server" style="mso-data-placement:same-cell;">
Saas: <asp:Label ID="lblAdjustFyr" runat="server" text='2' />
</div>
<a id="aEditAdjust" runat="server" href="javascript:void(0)" style="height:auto" class="dashboardButton">Edit</a>
</div>
<a id="aSaveAdjust" runat="server" href="javascript:void(0)" class="dashboardButton TextBoxBtn">Save</a>
</ItemTemplate>

how to place control in a td

I try to set two control in a td.
1. use a panel. as follow.
<td style="display: inline;">
<asp:Panel ID="pContainer" runat="server" Wrap="false">
<telerik:RadTextBox ID="rtxtBookingID" runat="server"></telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvBookingID"
runat="server" ControlToValidate="rtxtBookingID" ErrorMessage="|Booking ID"
Display="Dynamic"></asp:RequiredFieldValidator>
<telerik:RadButton ID="rbtnOpen" runat="server" Text="Browse" OnClientClicked="openViewWindow()"/>
</asp:Panel>
</td>
how to solve the problem.
if I use two td to place the two control . but the first control in the td will gernerate a div. so the two control distance is far?
As long as it works and you get ok behaviour you are fine and for layout issues you should use css. The way you place the controls on the page also depends on overall page design and structure, keep in mind that usage of tables to control layout is not promoted anymore and you should use divs and css whenever possible... again depending on whole page design of course.

ASP button is creating a DIV Tag and are not aligning in-line

I am facing a bizzare issue. The asp:Buttons are creating div tags and are aligning vertically but not horizontally. I want them to align horizontally or in css way "inline". can anyone suggest a work around to this one. or can you tell me what I need to do get things working. All other asp buttons are aligning inline in the page except of these three.
The alignment issue is in IE 7-9.
Things look good in Chrome and Firefox
This is the markup in asp:
<td class="FieldsetButtons" align="right">
<asp:Button id="y" runat="server" Width="100px" Text="Apply"
Enabled="False" onclick="y_Click" ValidationGroup="mail"
meta:resourcekey="yResource1"></asp:Button>
<asp:Button id="p" runat="server" Width="100px" Text="Verify"
ENABLED="False" onclick="p_Click" ValidationGroup="mail"
meta:resourcekey="pResource1"></asp:Button>
<asp:Button id="l" runat="server" Width="100px" Text="Reset"
CausesValidation="false" onclick="l_Click"
meta:resourcekey="lResource1"></asp:Button>
</td>
This is the markup that is being created in HTML:
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_yPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$y" value="#Apply#" id="ctl00_ContentPlaceHolder1_lServer1_y" disabled="disabled" style="width:100px;" />
</div>
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_pPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$p" value="#Verify#" id="ctl00_ContentPlaceHolder1_lServer1_p" disabled="disabled" style="width:100px;" />
</div>
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_lPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$l" value="#Reset#" id="ctl00_ContentPlaceHolder1_lServer1_l" style="width:100px;" />
</div>
Float them all to the left or right.
Add this to your style sheet:
.FieldsetButtons div {float:right;width:100px;}
That will make all child divs align horizontally right and should be browser friendly.
What does your style class FieldsetButtons contain? My guess is that something in your CSS is messing it up. Maybe consider using Firebug to determine what style is affecting the layout of those buttons.
you could use table inside and create a single row in it with 3 columns...
`
`
I'm thinking that the meta:resourcekey tags are generating the divs to be able to apply styling from the resource file, but i have not tested this theory. Have you tried a test without the meta:resourcekey tags to see if the divs go away?

Modal popup extender is rounded locally but not on the server

ASP.net ajax 2.0
I've got a modalpopup extender that looks like this:
alt text http://img441.imageshack.us/img441/6342/localmodal.jpg
The actual modal popup is wrapped around a rounded corner extender to give it the nice curved look. Here is a simple snippet of code:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" OkControlID="btnOk" TargetControlID="ibStartNow" PopupControlID="Panel2" PopupDragHandleControlID="PopupHeader" BackgroundCssClass="ModalPopupBG">
<asp:Panel ID="Panel2" style="display: none" runat="server">
<asp:Panel ID="Panel3" runat="server">
<div class="ConfirmationPopup" style="text-align:center; margin-right:auto;margin-left:auto;">
<div class="PopupHeader" id="PopupHeader">
Confirm Start Now<br />
</div>
<div class="PopupBody">
<br />
This will save the expense report header and allow
<br />
you to enter items into your expense report, are you sure?
<br />
<br />
</div>
<div class="Controls">
<asp:ImageButton ID="btnOk" runat="server" imageurl="~/images/ok.gif" CausesValidation="False" />
<asp:ImageButton ID="btnCancel" runat="server" imageurl="~/images/cancel.gif" />
</div>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel3" Radius="6" Corners="All" BorderColor="#9BD1FA" Color="#377CB1">
</ajaxToolkit:RoundedCornersExtender>
The strange thing is on my local machine running IE8 it looks great, even on the server using firefox / chrome it looks great. But once it is on the server and I use IE8 it is no longer rounded it is basically a square.
It just doesn't make sense why locally using IE8 it works, but on the actual web server using IE8 it is no longer rounded, it looks like this:
alt text http://img441.imageshack.us/img441/2977/servermodal.jpg
My guess is you have probably moved on with this issue since this was so long ago but I stumbled across this http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php which seems to work for me. It looks like the trick is, in addition to using two panels, set the back color of the container panel to Transparent

Resources