is it possible to edit table's class (background-color) inside the td if ..else condition.
#<table class='widgetContentText'>
<tr>
<th>..</th>
<th></th>
<th>..</th>
</tr>
<tr>
#If (item.QueueLength(medium) > threshold.Queuethreshold1(medium)) Then
#If (item.QueueLength(medium) > threshold.Queuethreshold2(medium)) Then
#<td class='effect' style="background-color:#FF3333" align="center">
#item.QueueLength(medium)
</td>
Else
#<td class='effect' style="background-color:#FFA500" align="center">
#item.QueueLength(medium)
</td>
End If
Else
#<td align="center">
#item.QueueLength(medium)
</td>
End If
Related
<table border=1>
<tr>
<th>one</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>
Draws a table which is just a bit wider than the word "one", and it's ok.
<table border=1>
<tr>
<th>one</th>
</tr>
<tr>
<td style='padding:0 0 0 0'>
<input style='width:100%' value='1'>
</td>
</tr>
</table>
Draws a table which is 4 times wider than needed.
Please advise how to make the width of INPUT equal to 100% of non-stretched TD without assigning the width of TD itself?
You can add a size attribute to your input. For example:
<table border=1>
<tr>
<th>one</th>
</tr>
<tr>
<td style='padding:0 0 0 0'>
<input size='1' value='1'>
</td>
</tr>
</table>
Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview
I have a table separated by thead and tbody. The text I have in tbody is vertically centered. I want to have it displayed at the top of the tbody.
<thead>
<tr>
<td>.... </td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<h1>Hi</h1>
<p> Hello!
</p>
</td>
</tr>
</tbody>
I tried doing something like:
tbody { vertical-align:top;}
But that doesnt work
The problem is not with valign as it works correctly, the problem is the element h1 has a margin by default, you should set it to 0:
h1 {
margin: 0;
}
<table border="1">
<thead>
<tr>
<td>.... </td>
<td>.... </td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td>
<h1>Hi</h1>
<p> Hello!</p>
</td>
<td>
A
</td>
</tr>
</tbody>
</table>
I am working in mvc3 razor view. I create pdf report from mvc3 razor view below is my controller code.
public ActionResult PReqDocPrint()
{
List<PReqPrintModel> Rec = new List<PReqPrintModel> { };
Rec = PReqPrint("", "", "");
return this.ViewPdf("Purchase Requisition", "PReqDocPrint", Rec);
}
I get data from database through stored procedure and return to controller
and my view code is given below.
#model IEnumerable<CBS.Models.PReqPrintModel>
#{
Layout = "~/Views/Shared/_LayoutForPrints.cshtml";
}
<table border="1" >
<tr>
<td>
<h2 style="text-align:center; font-family:Times New Roman;">Purchase Requisition</h2>
</td>
</tr>
</table>
<div style="color:Black;border-width:0px 1px 1px 0px;font-size:8px; font-weight:normal; page-break-before:always;">
#{
var OddColor = "#aaaaff";
var evenColor = "#EEFFFF";
var Odd = OddColor;
var eve = evenColor;
}
<table style="font-family:Times New Roman; font-size:small">
#foreach (var doc in Model.GroupBy(d => d.PReqNo))
{
foreach (var pre in doc)
{
<tr style="border:1;">
<td>
Purchase Requisition: #Html.Encode(pre.PReqNo)
</td>
<td>
Purchase Date: #String.Format("{0:dd/MM/yyyy}", #Html.Encode(pre.PReqDate.Date))
</td>
</tr>
<tr style="border:1;">
<td>
Store Location: #Html.Encode(pre.StName)
</td>
<td>
Department: #Html.Encode(pre.DeptName)
</td>
</tr>
<tr style="border:1;">
<td>
Remarks: #Html.Encode(pre.RefRemarks)
</td>
<td></td>
</tr>
}
<tr >
<td colspan="2">
<table border="1" style="color:Black;border-width:0px 1px 1px 0px;font-size:8px;font-family:Helvetica;font-weight:normal;">
<tr style="background-color:#7070a0; font-weight:bold; color:Black; border:1;" >
<td align="left">
Code
</td>
<td align="left">
Description
</td>
<td align="left">
Unit
</td>
<td align="left">
Part No
</td>
<td align="left">
Lot No
</td>
<td align="left">
Item Remarks
</td>
<td align="right">
Quantity
</td>
<td align="right">
Amount
</td>
</tr>
#foreach (var item in doc)
{
<tr bgcolor="#Odd">
<td align="left">
#Html.Encode(item.ItemCode)
</td>
<td align="left">
#Html.Encode(item.ItemDesc)
</td>
<td align="left">
#Html.Encode(item.Units)
</td>
<td align="left">
#Html.Encode(item.PartNo)
</td>
<td align="left">
#Html.Encode(item.LotNo)
</td>
<td align="left">
#Html.Encode(item.Remarks)
</td>
<td align="right">
#Html.Encode(item.QtyIN)
</td>
<td align="right">
#Html.Encode(item.Qty)
</td>
</tr>
}
if (Odd == OddColor)
{
Odd = evenColor;
}
else
{
Odd = OddColor;
}
}
</table>
</td>
</tr>
}
</table>
</div>
<div class="break"></div>
Below is my PDF result image which return from view
Here I want to start new PDF page When second Purchase Requisition no 2014030001 start. Any one please help me.
i already try inline CSS for page break or table page-break-before:always; and also try a separate div tag with page-break-before:always; but nothing obtain my required result.
Also it not apply separate style sheet formats on PDF view.
There is a table alt text that uses CSS (by using inherit in CSS) to format its layout. As you can see there is a drop down on top of the window that allows us select names, and based on the selection, the table would be populated. This action has been handled by an Ajax call, so we only refresh the table and not the rest of the page. However, when we call this Ajax call, even though we don't have any change in the code, there would be an extra space between vertical and horizontal borders of this table. I assume that there is a problem with the Ajax call and the CSS layout that we have this extra spaces. Does it make sense? or Do you any place that I can start my investigations?
Here is the source code of my Test.jsp
<a:test-webpart>
<table class="ContentPanel first-child" cellspacing="0" cellpadding="0">
<tr>
<th id="title" class="CPHeader" width="100%" colspan="400" style="border-bottom:1px solid <theme:get selector="#test .DefaultBorder" attribute="border-color" />;"><c:out value="${tile_title}" /></th>
</tr>
<%# include file="MyTest.jst" %>
<tbody class="content-area">
<tr>
<td>
<table class="ContentPanel ControlLayout" >
<tr>
<th style="padding-left:7px;" width="20%"><label for="testlist"><span >*</span><fmt:message key = "jsp.request.testlist" bundle="${local}" /></label></th>
<td class="last-child" width="80%">
<span >
<html:select property="valueAsMap(test_ITEM).value(test_OFFER)" styleClass="dropDown" styleId="offeredtest">
<html:optionsCollection property="value(Item_test_LIST)" label = "name" value ="id" />
</html:select>
</span>
</td>
</tr>
<tr>
<th style="padding-left:7px;" width="20%"><label for="employeeslist"><span >*</span><fmt:message key = "jsp.reques.employeeslist" bundle="${local}" /></label></th>
<td class="last-child" width="80%" >
<span >
<html:select property="valueAsMap(test_ITEM).value(Item_test_EMP)" onchange="javascript:getAlltests()" styleClass="dropDown" styleId="employeeId">
<html:optionsCollection property="value(Item_test_EMP_LIST)" label = "name" value = "id" />
</html:select>
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="padding-left:7px;" align="left"><label for="testacceptlist"><span >*</span><fmt:message key = "jsp.request.testacceptlist" bundle="${local}" /></label></th>
</tr>
<tr>
<td style="padding-left:7px;">
<kvl:rsr-webpart>
<div id="testsTable">
<table class="Tabular" width="100%" cellpadding="0" cellSpacing="0">
<tr class="first-child">
<th><fmt:message key = "jsp.request.select" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.a" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.b" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.c" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.d" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.e" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.f" bundle="${local}" /></th>
<th class="last-child"><fmt:message key = "jsp.request.job" bundle="${local}" /></th>
</tr>
<c:forEach var="item" items = "${items}" varStatus="status">
<tr class="<c:if test='${status.index % 2 != 0}'>Even</c:if> <c:if test='${item.isFromPrimaryJob == true}'>Primary</c:if> <c:if test='${item.isFromPrimaryJob != true}'>Exchange</c:if>">
<td>
<input type="checkbox"
id="test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>"
name="value(test_selected)"
value="<c:out value="${item.id}" />_<c:out value="${item.Date}"/>"
onclick="javascript:checkBox('test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>','value(test_selected)','valueAsMap(REQUEST_ITEM).value(test_selected_list)','false')" >
</td>
<td>
<c:choose>
<c:when test="${empty item.label}">
</c:when>
<c:otherwise>
<c:out value="${item.label}"/>
</c:otherwise>
</c:choose>
</td>
<td><c:out value="${item.Date}"/></td>
<td><c:out value="${item.b}"/></td>
<td><c:out value="${item.d}"/></td>
<td><c:out value="${item.e}"/></td>
<td><c:out value="${item.f}"/></td>
<td class="last-child"><c:out value="${item.job}"/></td>
</tr>
</c:forEach>
</table>
</div>
</kvl:rsr-webpart>
</td>
</tr>
<tr>
<td style="padding-left:7px;">
<table class="ContentPanel ControlLayout" width="100%">
<%# include file="request.jst" %>
</table>
</td>
</tr>
</tbody>
</table>
</a:test-webpart>
have a look at the generated HTML. just looking at the rendered stuff won't help except to something is wrong, not what. and just looking at the server code won't help as it uses magic and hides the HTML sometimes.
Later on I figured out that the problem has nothing to do with the any Ajax rendering. It was the return HTML tag that had these extra padding as it was inheriting its layout from another place. I enforced my padding and borderline along with cells that I was sending from server and everything worked like a charm.