Missing closing <tr> tag - razor

A partial view that I have is throwing an error:
{"Encountered end tag \"tr\" with no matching start tag. Are your start/end tags properly balanced?\r\n"}
I cannot find where the tag is not closed. I have spent a significant amount of time trying to find the error, to no avail.
I am relatively positive it has to do with the code elements I have in the view, but I am unable to pinpoint it.
This is the Razor view.
#{
DateTime dateValue;
}
<div class="table-responsive">
<input type="checkbox" class="checkallMaster" />
<table id="reportTable" class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th style="text-align: left;">Variable Investment Option</th>
<th>Unit Value<br /><span style="font-weight: normal;">#Model.Start.ToString("dddd, M/d/yyyy")</span></th>
<th>Start Date</th>
<th>Select Values<br />To Download<br /><input type="checkbox" /></th>
</tr>
</thead>
<tbody>
#foreach (System.Data.DataRow row in Model.Output.Rows)
{
<tr>
<td align="left">#row.ItemArray[1].ToString();</td>
<td align="right" width="50px;">#row.ItemArray[2].ToString();</div></td>
<td align="center">
if (DateTime.TryParse(row.ItemArray[3].ToString(), out dateValue))
{
#Html.Raw(dateValue.ToString("M/d/yyyy"));
}
else
{
#Html.Raw("N/A");
}
</td>
<td align="center"><input type="checkbox" name="FundCodes" value="#row.ItemArray[0].ToString()" class="checkall" /> </td>
</tr>
}
</tbody>
</table>
</div>

You're closing a div in the middle of a td:
<td align="right" width="50px;">#row.ItemArray[2].ToString();</div></td>
This is going to try to close the div that contains the whole table, which means the table structure bleeds out from the div. Anything thereafter is going to be undefined and essentially a markup error.
Also note that you don't need semi-colons to terminate your Razor syntax statements. I imagine those are actually going to render to the browser as semi-colons, which you probably don't want.

Related

Using CSS to add a line break to an html table dynamically when in mobile view

I have an html table that shows dynamic content from a database. The first table cell has the content rendered in a dropdown list and has the most variance in its length. The rest of the cells are pretty small and uniform. Screen looks fine in a desktop browser - problem is, when rendered in a mobile browser, it stretches the width beyond the boundary of the screen.
What is the best way using css and media queries, to cause that first table cell to line break only in a mobile view, staying inline in a desktop view?
To visualize what I'm talking about:
Desktop -
<tr>
<td><td><td><td>
</tr>
Mobile -
<tr>
<td>
<td><td><td>
</tr>
here is the pseudocode of table as it is now:
<Table id="tblLineItemsInv" Class="table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="font-size:14px"> Description</th>
<th style="width:150px; font-size:14px"> Quantity</th>
<th style="width:150px; font-size:14px"> Amount</th>
<th style="width:150px; font-size:14px"> Total</th>
<th style="width:150px; font-size:14px"> Taxable</th>
<th></th>
</tr>
</thead>
<tbody style="padding-left:5px;"></tbody>
<tfoot>
<tr>
<td>
<select id="ddl1"></select>
</td>
<td> <input type="text" id="txtQuantityInv" /></td>
<td> <input type="text" id="txtAmountInv" /></td>
<td> <input type="text" id="txtTotalInv" /></td>
<td><input type="checkbox" id="cbTaxableInv" /></td>
<td><input type="button" id="btnAddInv" value="Add" /></td>
</tr>
</tfoot>
</Table>

indentation in a web document <td></td>

I'm working on a form in my application and trying to clean up the code that was put in place before me. HEre's something I'm coming across that seems like bad practice and I am having a hard time trying to abbreviate it and clean it up.
Here's the code...
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="6%"></td> <---- I want to get rid of this!
<td width="45%">
<asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
</td>
<td>
<asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
</td>
</tr>
<tr>
<td></td> <------- Have to keep adding this for every checkBox
<asp:Checkbox ID=.............."
</tr>
So what I'm trying to get rid of the the initial indentation, mainly ....
<td width="6%"></td>
Because this is in place, i have to do a
<td></td>
before every single row otherwise the indentation dissapears. Is there any way to fix this so that all my checkboxes are indented?
You can use colspan="2" on the checkbox cells and put padding-left: 6% as a style. Here's a JS fiddle. I added a row above your first row to show the column spacing, modified the first row use this change, and left the second row intact.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
edit: Also, I recommend validating your HTML. You can wrap your code snippet up with a doctype and the other necessary items to get identify errors and warnings at https://validator.w3.org.
<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
</body><html>
Not sure if you'll find this acceptable, but you could keep the <td width="6%"></td> and give it a huge rowspan value. So like this:
<td width="6%" rowspan="999999"></td>
Then you can omit the empty <td></td> for the first 999999 rows. Most likely you have fewer rows than that; or if not, just make the rowspan even higher. The table will not become longer just because of the huge rowspan value.
Of course this all breaks down if you also have rows where the indent should not be applied; a fix for that could be to calculate the exact rowspan value in advance.

Are there limitations to the number of rows in bootstrap or html tables?

I have an html table that is cutting off all rows beyond the 200th. The rows are in fact there, because the list.js javascript search feature will find data in them if I search for it, but they don't display when the table loads.
Is this a limitation or setting in bootstrap or some other html thing?
Update - here is a simplified version of the table.
Also, the javascript libraries I'm using on this page that interact with the table are list.js and treetable.js.
I will note that I have seen this issue on another app I developed, but 99% of the time it wasn't an issue so it was never resolved. On this app in question, it will almost always be an issue.
<div class="table">
<div class="table-responsive" id="table3div">
<table class="table table-hover table-condensed tablesorter" id="table3">
<thead>
<tr>
<th>
<div class="checkbox custom-control custom-checkbox">
<label>
<input type="checkbox" id="checkAlltable3" />
<span class="custom-control-indicator"></span>
</label>
</div>
</th>
<th class="header">Description</th>
<th class="header">Status</th>
<th class="header">Associated With</th>
<th class="header">Assigned To</th>
<th class="header">ID</th>
<th class="header">Type</th>
<th class="header headerSortDown">Due Date</th>
</tr>
</thead>
<tbody class="list">
#for (int i = 0; i < Model.IssuesAndNotes.Count; i++)
{
<tr>
<td>
<div class="checkbox custom-control custom-checkbox">
<input id="checkBox" type="checkbox">
</div>
</td>
<td class="description">
Some data
</td>
<td class="status">
Some data
</td>
<td class="association">
Some data
</td>
<td class="assignedTo">
Some data
</td>
<td class="issueId">
Some data
</td>
<td class="type">
Some data
</td>
<td class="date">
Some data
</td>
</tr>
}
</tbody>
</table>
</div>
The default limit in list.js is 200 you can modify the limit in the parameters https://github.com/javve/list.js#parameters
For clarification look to the API docs on page options http://listjs.com/api/

How do you display nested tables?

I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>

table align = center || right, difference in <br />

In asp.net I have created a table:
<table border="1" align="right" class="detailstable StartOnNewPage">
<tr>
<td style="text-align:left; width:100px;">Miscellaneous</td>
<th style="text-align:right; width:100px" class="FadeOutOnEdit"><%: this.FormatMoney(MiscellaneousItemsTotal) %></th>
</tr>
<tr>
<th style="text-align:right; width:100px;"><%: this.DisplayMiscellaneousPercentage%></th>
<td style="text-align:right; width:100px;"><%: this.MiscellaneousToDisplayWithTwoDecimalPlaces%></td>
</tr>
<tr>
<th style="text-align:left; width:100px;">TOTAL</th>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(TotalOfAll)%></th>
</tr>
</table>
<br />
<br />
<br />
If the align of the table is set to 'right' it doesnt pick up the 3 <br />, but if I set the table to align="center" it does...any ideas as to why this is?
Normally, an HTML table will have a break before and after it. The
align attribute allows other HTML elements to wrap around the table.
So your breaks are actually to the left of the table when you use right align.
The align attribute is now deprecated so should not be used.
Put your table styling, including all that style hardcoded for td and th, into your css file.
AS #Joe R said it is depracated ,I suggest you use margin-bottom:10px; for this purpose.