I have some HTML
<table class="table table-hover table-striped table-responsive table-bordered">
<tr class="row">
<td colspan="3" class="col-md-3">Location</td>
<td colspan="4" class="col-md-4">Info</td>
<td colspan="2" class="col-md-2">Date/Time</td>
<td colspan="1" class="col-md-1">Mandatory</td>
<td colspan="2" class="col-md-2">Edit</td>
</tr>
<asp:Label ID="lblNewProjectConferences" runat="server"></asp:Label>
</table>
with some ASP.NET methods:
lblNewProjectConferences.Text = UtilHTML.GetConferncesHTML(conferences, editor);
I am essentially building the HTML in a method and then injecting into a label which is inside of a table, the result being rows added to the table properly formatted. This is all working as expected:
But, when I do the following from javascript
document.getElementById("lblNewProjectConferences").innerHTML += response;
I get something like this:
I "inspected element" from my browser and the Label is appearing before the table in HTML. This makes no sense to me.
UPDATE: The answers so far didn't help. The label code is appearing before the table code when I use innerHTML, it's not appearing first and then the table appears
I see you're using bootstrap.
You could do this also.
$(document).ready(function () {
document.getElementById("lblNewProjectConferences").innerHTML += response;
});
Edited:
Try this:
<asp:Label ID="lblNewProjectConferences" runat="server"></asp:Label>
<table class="table table-hover table-striped table-responsive table-bordered" id="gridTable">
<tr class="row">
<td colspan="3" class="col-md-3">Location</td>
<td colspan="4" class="col-md-4">Info</td>
<td colspan="2" class="col-md-2">Date/Time</td>
<td colspan="1" class="col-md-1">Mandatory</td>
<td colspan="2" class="col-md-2">Edit</td>
</tr>
</table>
And in the javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#gridTable').appendTo($("#lblNewProjectConferences").html());
});
</script>
You have positioned the asp:Label element inside the table before the closing </table> tag. The browser does not recognize the label as part of a table, so it renders it before it renders the table. Moving the label after the </table> tag should resolve the problem.
Related
I am using to Gembox.Document to convert HTML to PDF. This is my HTML:
<div style="border-top:5px solid black;border-left:5px solid black;padding:2px 15px;font-size:18px;font-weight:bold;line-height:22px; background-color:aquamarine;width:230px">
Test
</div>
But in PDF, the border is lost.
Do you know how to fix this problem?
Edit: I add sample code: (test HTML link: https://www.gemboxsoftware.com/document/examples/c-sharp-convert-html-to-pdf/307)
<!DOCTYPE html>
<html>
<body>
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:50%;">
<div style="border-top:5px solid black;border-left:5px solid black;padding:2px 15px;font-size:18px;font-weight:bold;line-height:22px; background-color:aquamarine;width:230px">
Test
</div>
</td>
<td style="width:50%;font-size:18px;font-weight:bold;line-height:22px;">Number</td>
</tr>
</table>
<div style="border-top:5px solid black;border-left:5px solid black;padding:2px 15px;font-size:18px;font-weight:bold;line-height:22px; background-color:aquamarine;width:230px">
Test
</div>
</body>
</html>
Edit 2: I found out a solution to fix, it is really not beautiful but at least it worked for me
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:50%;">
<table style="width:150px;margin:0px" cellpadding="0" cellspacing="0">
<tr>
<td style="border-top:1px solid black;border-left:1px solid black;">
<div style="padding:2px 15px;font-size:18px;font-weight:bold;line-height:22px;">
Test
</div>
</td>
</tr>
</table>
</td>
<td style="width:50%;font-size:18px;font-weight:bold;line-height:22px;">Number</td>
</tr>
</table>
What version are you using? Perhaps you should try again with the current latest bugfix version, from here.
I tried converting this HTML:
And I get this PDF:
As you may notice, the top and left borders are there. Also, all other CSS except "width" are there.
Last, I also tried "display" and "visibility" and it seems that both work.
I am working on a sidenav that is built on .NET MenuItems like so:
<asp:MenuItem value="19" Text="Profile" Selectable="false"></asp:MenuItem>
<asp:MenuItem value="0" Text="Overview" ToolTip="Overview" Selected="true"></asp:MenuItem>
<asp:MenuItem value="2" Text="My Info & Email Subscriptions" ToolTip="My Info & Email Subscriptions"></asp:MenuItem>
In HTML, the output produces a series of nested tables around each MenuItem which looks like this:
<div id="_links" class="span-3">
<table id="FormUserControl__tabMenu" cellpadding="0" cellspacing="0" border="0" style="clear:left;">
<tbody>
<tr id="FormUserControl__tabMenun0">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td style="white-space:nowrap;width:100%;">
<a style="text-decoration:none;">
<div id="FormUserControl__tabMenu_ctl00__tabMenuItemPanel" class="myAccountHeading ">
Profile
</div>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Overview" id="FormUserControl__tabMenun1">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td style="white-space:nowrap;width:100%;"><a href="javascript:__doPostBack('FormUserControl$_tabMenu','0')" style="text-decoration:none;">
<div id="FormUserControl__tabMenu_ctl01__tabMenuItemPanel" class="sideNav">
Overview
</div>
</td>
<tr>
<tbody>
</td>
</tr>
</tbody>
</table>
</div>
How can I add to add accessibility role and aria-level to these innermost divs? The goal is to achieve accessibility compliance. For example:
<div role="heading" aria-level="[2]">Profile</div>
I have looked through MSDN documentation and it looks like there isn't a way to add those attributes within the intial MenuItem declaration.
I also tried adding role and aria-level attributes within CSS, which I know is hacky, but I figured since content can be set, it was worth trying. That doesn't work.
I could readily do this in JavaScript, but I really want to avoid involving that, it's a last resort and I do know how to do that.
Is there a way to change the MenuItem output to involve role and aria-level? Or, is there a way to have it output a header instead of a div nested within two tables?
Many thanks!
I use visual studio 2010 with framework2.0
I design a page use c# ,now ,just called A.aspx.
the page have a table to layout,
like
<table> <tr>
<td>
Name
</td>
<td>
<asp:TextBox .../>
<div id="div1" style="vertical-align: bottom;">
<img.. />
</div>
<div><img ../></div>
<asp:Label .../>
<asp:Label .../>
</td>
</tr>
</table>
Now ,I want to let second<td></td> layout one row. how to set up?
I try <td style ="float:left"> but not worked,it always show two row.
can somebody help me with this?
First understand your layout, here is an example with borders
If you want to float elements try a layout using div and css
A layout with tables is very hard to work with and nobody is doing it anymore. You can use tables for specific situation only if you like but most of the time try to use div layout and the other elements to organize content.
HTML
<table class="borde">
<tr class="borde">
<td class="borde">
Name
</td>
<td class="borde">
fffff
<div class="divRojo"></div>
fffff
</td>
</tr>
</table>
CSS
.borde { border:1px solid black; }
.divRojo { border:1px solid red; }
With one more row and the div
<table class="borde">
<tr class="borde">
<td class="borde">
Name
</td>
<td class="borde">
fffff
<div class="divRojo"></div>
fffff
</td>
</tr>
<tr>
<td colspan="2">
<div>Content in one column in a new row</div>
</td>
</tr>
</table>
You want your second <td> in one row? So, create another <tr>?
<table>
<tbody>
<tr>
<td>
Name
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
http://jsbin.com/uJenUVOx/1/edit
I have fix this question ,the second <td> use <table> then can solve that question.
I realize this is a strange/simple question. I have HTML—tables and rows—that make up a grid. I need the resulting grid to look exactly like the HTML does, with data pulled from a DataTable.
How should I go about doing that? If I replace the HTML with a GridView the result will look different from what I need it to look like. Do I create a custom grid class that spits out tables and rows?
To clarify: I've been given an HTML grid...
<div>
<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
</table>
</div>
...which I now need to populate with data from a table, and preserve the original HTML.
If you want to use ASP.Net databinding capabilities, go with a Repeater. The markup will look something like this:
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<asp:Repeater runat="server">
<ItemTemplate>
<tr>
<td><%# Eval("SomeFieldName") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
You can also build the markup manually in the code-behind by instantiating table/row/cell objects and adding them to the controls collection of the page, control, or parent container control. This tends to be time-consuming but it's a valid option in some cases, such as when you wish to have highly dynamic content that isn't easy to express in a Repeater.
A third option is to mix server markup with client markup, e.g.
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<% foreach( var obj in someCollection ){ %>
<tr>
<td><%= obj.Property %></td>
</tr>
<% } %>
</tbody>
</table>
The last option is quite similar (albeit more verbose) to Razor syntax used in ASP.Net MVC views.
I think your best bet for that would be a repeater. Link below.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater(v=vs.100).aspx
Another option would be to use a ListView with your HTML table setup as the LayoutTemplate.
quick example:
<asp:ListView ID="MyListView" runat="server">
<LayoutTemplate>
<table id="Table1" cellpadding="1" width="100%" runat="server">
<tr id="Tr1" runat="server">
<th id="Th1" style="font-weight: bold; text-align: left" runat="server">
Header1
</th>
<th id="Th2" style="font-weight: bold; text-align: left" runat="server">
Header2
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td style="text-align: left">
<%# Eval("Field1")%>
</td>
<td style="text-align: left">
<%# Eval("Field2")%>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
If I have a table in .aspx
<table id="table" >
<tr id="first" runat="server"> blablabla>
<td></td>
</tr>
<tr id="second" runat="server">
<td></td>
</tr>
</table>
How can I change order from second to first in the code behind?
I tried to wrap tr with placeholders and hide/display them accordingly, but it doesn't allow me to do that as I get duplicate IDs inside these rows. And I can't use javascript for that..
As you have not set either tr or table as server side code (by using a runat="server" attribute), they are not visible to the code behind and it cannot change the ordering.
In aspx:
<table id="table" runat="server">
<tr id="first" runat="server">
<td>blablabla</td>
</tr>
<tr id="second" runat="server">
<td> </td>
</tr>
</table>
In code behind:
var row = table.Rows[0]; // get reference to first row
table.Rows.Remove(row); // remove it
table.Rows.Add(row); // Add again, at the end (default)
Since this is static markup rather than a server side control (none of the tags are set to runat="server"), the server side C# code can't modify them.