Stopping Divs displaying across multiple cells in Excel - asp.net

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>

Related

Put an asp label under another without space between them

In a column I have a div container which contains two asp labels, one under the other.
<td>
<div>
<h2><asp:Label runat="server" ID="lblEmployeeFullname" Text="Claudie"></asp:Label></h2>
<asp:Label runat="server" ID="lblIdEmployee" Text="34343d-dfadfsf-3433"></asp:Label>
</div>
</td>
There is a blank space between the labels and I am trying to remove it.
Below a screenshot in design mode.
I want them to be together without any space in between.
How can I do this?
This happens by the fact that the 'h2' tag has its own browser-specific margin top/bottom style.
You can disable it something like this:
<h2 style="margin-top:0;margin-bottom:0;">...</h2>
<h2 style="margin-top:0;margin-bottom:0;"><asp:Label runat="server" ID="lblEmployeeFullname" Text="Claudie"></asp:Label></h2>
<asp:Label runat="server" ID="lblIdEmployee" Text="34343d-dfadfsf-3433"></asp:Label>

Ensuring label and checkbox start on the same line

Is there a simple way to do this? I have a checkbox and some text defined like so in an aspx file:
<div id="div01" class="someClass" runat="server">
<asp:CheckBox ID="chkBox01" Checked="True" runat="server" />
<asp:Label ID="lblSomeText" runat="server" Text="" meta:resourcekey="lblSomeText1"></asp:Label>
</div>
..the problem is that when rendered we have a checkbox and a span, and when the label's text is long enough the checkbox appears above the label, rather than at the left. The resulting html structure looks like:
<div>
<input type="checkbox"></input>
<span>some fairly long text</span>
</div>
I'd like to force that checkbox to be on the same line as the label no matter the text length. I can do this in html easily enough but is there a way to ensure it when coding the web components? I'm not a CSS pro and have tried some float:left and float:right stuff to no avail.

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.NET tableless css forms

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.

Textbox within table grows beyond 100% width (IE only)

I have a GridView control (which renders to table, tr, td) with some BoundFields and TemplateFields. Essentially, I am displaying two columns, Application Name and Notes (as a TextBox), and I want 35%, 65% relative widths. Here is my asp.net markup:
<asp:GridView ID="gridRequestedApps" DataSourceID="llbRequestedApplications" runat="server"
AutoGenerateColumns="False"
DataKeyNames="ComputerID, RequestID"
EnableViewState="False"
cssclass="xGridview">
<Columns>
<asp:BoundField DataField="ComputerID" HeaderText="ID" SortExpression="ComputerID" Visible="False" />
<asp:BoundField DataField="RequestID" HeaderText="ID" SortExpression="RequestID" Visible="False" />
<asp:TemplateField HeaderText="Application Name" ItemStyle-Width="35%" ItemStyle-Wrap="false">
<ItemTemplate><asp:TextBox ID="ApplicationName" runat="server" Text='<%# Bind("ApplicationName") %>' CssClass="input_text"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Notes" ItemStyle-Width="65%">
<ItemTemplate>
<div style="width:100%; overflow:hidden">
<asp:TextBox ID="UserNotes" runat="server" Text='<%# Bind("UserNotes") %>' CssClass="input_text" style="overflow:hidden"></asp:TextBox>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now at one point (with slightly different html than shown above), I did have the 35/65 relative widths working. However, I then noticed that if I put long text into the textbox, it was growing horizontally stretching its containing table past 100% width. (This is in IE7....in Firefox, the overflow:hidden seemed to be working).
So, I started messing with the CSS to try to fix the bug in IE, but now, not only does it still overflow, but my column widths are no longer respecting the 36/65 settings.
Before jQuery, try this first. I found it by googling "ie overflow:hidden table cell".
How to prevent HTML tables from becoming too wide
Using Javascript for styles usually isn't a good idea, especially if later on in the product's life another developer comes along and wants to, say, add a column. Agreed, sometimes hacking a solution together feels nicer in the short term, but it can only lead to headaches in the future.
just solved myself this problem, and I fell just...
Change document type definition to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
but care that other parts of the page don't start jumping around.

Resources