Can't print from website after Chrome version 108.0.5359.125 - html

There is a printing problem after the latest version of Chrome. Since each <td colspan> content in the table is of a certain length, it says "Loading preview" and eventually shows an error.
<tr class ="gosterme islem" style="contain:strict; display:table;">
It currently works fine in Opera browser but previously worked in Edge.
<tr class="gosterme nosort">
<td colspan="2">
<input type="hidden" name="SiraNo" value="#(item.SiraNo)" />
<input type="hidden" name="ID" value="#(item.ID)" />
<table class="ictablo" width="100%" style="text-align:left;">
<tr class="#(renkClass) #(item.ID==0?"":"prgOzet")" data-link="#Url.Action("ProgramOzetTooltip", "Program", new { ID = item.ID, area = "yonetim", TurID = item.TurID,Tarih=item.Tarih.Value.ToString("dd.MM.yyyy HH:mm") })">
<td colspan="2">
<div class="gunlukProgramCerceve">
<div class="gunlukProgramBaslik">
<span class="saatYazi" style="font-weight:bold;">Tüm Gün</span>
#if (item.TurID != (int)Sabitler.ZiyaretTur.Program)
{
<span class="saatYazi" style="font-weight:300; background-color:#edebeb; padding:1px; display:inline-block;width:100%;text-align:center;">
#(KayitTurYazi)
#if (DvtKesinDegilDurumID == item.DurumID)
{
<span class="davetKatilimKesinDegil tooltips" data-original-title="Katılım Kesin Değil"> ? </span>
}
</span>
}
else if (item.TurID == (int)Sabitler.ZiyaretTur.Program && isTaslakprgVar&& item.KategoriID == TaslakPrgKategori.ID)
{
<span class="programdurum saatYazi programArzBg">
Taslak
</span>
}
</div>
<div class="gunlukProgramDetay">
<span class="icerikBolum" style="display:block;">
#if (item.TurID != (int)Sabitler.ZiyaretTur.Ziyaret || item.isRandevuAciklama)
{
#Html.Raw(item.Aciklama)
}
#if (Model.Filtre.EkstraNot && !string.IsNullOrEmpty(item.EkstraNot))
{
<span style="color:red">#item.EkstraNot</span>
}
</span>
#if (!string.IsNullOrEmpty(item.PrgNotu)&& item.TurID != (int)Sabitler.ZiyaretTur.Ziyaret&&Model.Filtre.PrgNot)
{
<span class="katilimcilarNot icerikBolum" style="contain:size;"> #(Html.Raw(item.PrgNotu))</span>
}
#if (string.IsNullOrEmpty(item.Aciklama) && item.TurID != (int)Sabitler.ZiyaretTur.Program && item.katilimcilar.Any() && !Model.Filtre.Katilimci)
{
YeniKisiModel katilimci = item.katilimcilar.FirstOrDefault();
if (katilimci != null)
{
#(KayitTurYazi + " :" + katilimci.AdSoyad )
<span class="icerikBolum" style="font-size:#(Model.Filtre.yazi)px;"> #(katilimci.Aciklama)</span>
}
}

It appears to be a known issue in Chrome v108: https://support.google.com/chrome/thread/191619088?hl=en&msgid=192661374
Suggested fixes from that thread:
Use contain: size; in the parent element
Use contain: strict;
More information about contain is here: https://developer.mozilla.org/en-US/docs/Web/CSS/contain
It may be fixed in a future Chrome release; https://chromestatus.com/roadmap
Update: Both contain options broke chartjs canvas elements in our testing. Contain size didn't resolve the printing issue either.
Simon's suggestion from here caused our chartjs elements to stop working correctly when moving between print preview and the page, and when the page was resized.
#media print {
.chartjs-size-monitor {
display:none !important;
}
}

Related

Initializing variable in HTML5 for Input tag

Here is the html source code of page that loads array of products:
<div class="container" *ngFor="let product of products">
<div class="product">
<div class="img-container">
<img
//image url
</div>
<div class="product-info">
<div class="product-content">
<h1>{{product.name}}</h1>
<p>{{product.description}}</p>
<p>Price: {{product.price}} $</p>
<p>Quantity:
<button type="button" class="btn btn-danger" (click)="minusQuantity(product)">-</button>
<input type="number" class="input-quantity" [(ngModel)]="product.count"/>
<button type="button" class="btn btn-success" (click)="plusQuantity(product)">+</button>
<div class="buttons">
<a class="button add" (click)="addToCart(product)">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
When page is loaded, numeric input is empty (there is no value visible inside). Hence clicking on - and + buttons to invoke minusQuantity() and plusQuantity() have no effect on the product.count and displaying it on the page.
I've tried to set default value, but it is overridden by ngModel. If i use only value without ngModel, then input does not react to any changes caused by -/+ buttons (since it's just hardcoded "1").
But if I input e.g. "1" manually on the input, then + and - buttons do work, since there is a value provided, and it works OK.
Question is:
How avoid this issue? Is there any way to initialize input type with some value and then pass it to the product.count correctly? Or the approach should be totally different?
Fragments of components that handle +/- methods:
product.component.ts
plusQuantity(product: ProductModel) {
if (product.count < 99) {
this.cartService.increaseQuantity(product);
}
}
minusQuantity(product: ProductModel) {
if (product.count > 1) {
this.cartService.decreaseQuantity(product);
}
}
cartService.ts
increaseQuantity(product: ProductModel) {
product.count = product.count + 1;
this.orderElement.quantity = product.count + 1;
return product.count;
}
decreaseQuantity(product: ProductModel) {
product.count = product.count - 1;
this.orderElement.quantity = product.count - 1;
return product.count;
}
Use a javascript file with the code:
var cartService = {}
cartService.plusQuantity = function(product) {
product = ProductModel;
if (product.count < 99) {
this.cartService.increaseQuantity(product);
}
};
cartService.minusQuantity = function(product) {
product = ProductModel;
if (product.count > 1) {
this.cartService.decreaseQuantity(product);
}
};
Then it might work!

Failure handler in Google Apps Script receives object different from what is thrown on server side

My app sends submitted form data to this server-side function:
function processFormData(data)
{
data = JSON.parse(data);
// validate data
var errorObject = {},
potholeErrors = createErrorObjectFor('pothole'),
intervalSizeErrors = createErrorObjectFor('intervalSize');
// make sure numbers are actual numbers and not NaN's.
if (!validateNumber(data.potholeWidth))
{
potholeErrors.messages.push(errorTypes.NOT_A_NUMBER);
errorObject.potholeWidth = potholeErrors;
}
if (!validateNumber(data.intervalSize))
{
intervalSizeErrors.messages.push(errorTypes.NOT_A_NUMBER);
errorObject.intervalSize = intervalSizeErrors;
}
// make sure numbers are within their respective bounds (handled by handleErrors())
errorObject = handleErrors(data, errorObject);
// if intervalSize doesn't divide potholeWidth, make it so
if (data.potholeWidth % data.intervalSize > 0) data.potholeWidth = nextMultiple(data.intervalSize, data.potholeWidth);
// if there is anything in errorObject, throw it
if (Object.getOwnPropertyNames(errorObject).length != 0)
{
Logger.log('errorObject == ' + JSON.stringify(errorObject, null, '\t'));
throw errorObject;
}
// createSpreadsheet
return createSpreadsheet(data.spreadsheet, data.potholeWidth, data.intervalSize);
}
which, upon success, does exactly what it's supposed to do. However, when end-user enters any invalid input, the object the server-side throws back is different than the one they end up getting. I tried entering a pothole width that was too small. When I inspected Logger on server-side, I saw this correct output:
however, in the Developer console, I see:
The code that communicates data to the server looks like:
function updateURL(url)
{
// activate button
$('#input[type="submit"]').prop('disabled', '');
// change href of #spreadsheetLink
$('#spreadsheetLink').attr('href', url);
// unhide the link's container if hidden
if ($('#spreadsheetLink').parent().hasClass('hidden')) $('#spreadsheetLink').parent().removeClass('hidden');
// hide the 'Loading...' element
if (!$('#loading').hasClass('hidden')) $('#loading').addClass('hidden');
}
function emailLink()
{
google.script.run.withSuccessHandler(function() {
$('#emailLink').next().text('E-mail message has been sent!');
$('#emailLink').prop('disabled', 'disabled');
}).emailLink($('#spreadsheetLink').attr('href'));
}
function handleFails(failData)
{
var DEBUG = true;
if (DEBUG) console.log('failData == ' + JSON.stringify(failData, null, '\t'));
// hide 'Loading...' element
if (!$('#loading').hasClass('hidden')) $('#loading').addClass('hidden');
// for now, let's ignore any Errors/TypeErrors.
if ((!failData instanceof Error) && (!failData instanceof TypeError))
{
// for now, if there were any errors with any of the fields, simply mark them as .invalid
if ((failData.potholeWidth) && (failData.potholeWidth.messages.length > 0))
{
if (!$('#potholeWidth').hasClass('invalid')) $('#potholeWidth').addClass('invalid');
}
if ((failData.intervalSize) && (failData.intervalSize.messages.length > 0))
{
if (!$('#intervalSize').hasClass('invalid')) $('#intervalSize').addClass('invalid');
}
}
}
function submitFormData()
{
// hide spreadsheetLink container if not already done, and clear its <span> element if not already clear
var spreadsheetLinkContainer = $('#spreadsheetLink').parent(),
spanElement = $('spreadsheetLinkContainer').find('span');
if (!$(spreadsheetLinkContainer).hasClass('hidden')) $(spreadsheetLinkContainer).addClass('hidden');
if ($(spanElement).text() != '') $(spanElement).text('');
// get all data
var potholeWidth = parseNumberField('potholeWidth'),
intervalSize = parseNumberField('intervalSize') || defaults.get('intervalSize'),
concaveEdges = $('input[name="concaveEdges"]').filter(function() { return $(this).prop('checked'); }).next().text() === 'Yes',
spreadsheetName = parseField('spreadsheetName') || defaults.get('spreadsheetName');
// make button inactive
if (($(this).prop('tagName')) && ($(this).prop('tagName').toLowerCase() == 'input')) $(this).prop('disabled', 'disabled');
// show "Loading..." element
if ($('#loading').hasClass('hidden')) $('#loading').removeClass('hidden');
// submit this data to the server
google.script.run.withSuccessHandler(updateURL).withFailureHandler(handleFails).processFormData(JSON.stringify({
potholeWidth: potholeWidth,
intervalSize: intervalSize,
concaveEdges: concaveEdges,
spreadsheet : spreadsheetName
}));
}
and the HTML looks something like this:
<form>
Place straightedge/yardstick along width of pothole such that it points at the corners, <a class="showImage">like this</a>
<span class="row">
<label class="firstColumn seventeenTwentieths">Pothole width (in inches): </label>
<input type="text" class="secondColumn tenth numberField" id="potholeWidth" required />
</span>
<span class="rowTight">
<label class="firstColumn seventeenTwentieths">Interval size (in inches, default 1 inch): </label>
<input type="text" class="secondColumn tenth numberField" id="intervalSize" value="1" />
</span>
<div class="rowTight">
<label class="firstColumn">Do any of the edges intersect the straightedge/yardstick other than at the corners?</label>
<div class="secondColumn">
<span>
<input type="radio" name="concaveEdges" id="yesConcaveEdges" />
<label for="yesConcaveEdges">Yes</label>
</span>
<br>
<span>
<input type="radio" name="concaveEdges" id="noConcaveEdges" checked />
<label for="noConcaveEdges">No</label>
</span>
</div>
</div>
<span class="rowTight">
<label class="firstColumn half">Spreadsheet name: </label>
<input type="text" class="secondColumn nineTwentieths" id="spreadsheetName"/>
</span>
<span class="center row">
<button class="center" id="clearForm">Clear</button>
<input type="submit" class="center action" value="Create spreadsheet" />
</span>
</form>
<span id="loading" class="row center fullWidth hidden">
Loading...
</span>
<span class="row center fullWidth hidden">
Here is your spreadsheet
<button id="emailLink">E-mail me the link</button>
<span></span>
</span>
What is that object the client actually gets and how to make sure that it's getting the object the server actually throws?
I fixed it.
What I did
In code.gs
Instead of simply throw errorObject;, I said throw JSON.stringify(errorObject);
In JavaScript.html file
in handleFails(), I converted the string the server-side threw back into object (failData = JSON.parse(failData)) to use it. It outputted it correctly, and all is well.
What I learned
Any time the server is either giving or receiving data, it MUST be in the form of a string! (Use JSON.stringify() to make that data a string!)

ASP.NET - Image not rendered at runtime

Please help me with a weird issue I am facing in my web application. In the scenario below an image (company logo) is not getting rendered at runtime.
I have designed a very simple page named default2.aspx. The intention of this page is to work as a maintenance page in case of an application downtime.
The logic of implementing this by have a SiteIsActive switch key in web.config with "N" representing downtime.
In the Global.asax I have implemented the "Application_BeginRequest" method to check for the SiteIsActive flag and redirect to default2.aspx. While the functionality is working fine with both the SiteIsActive cases, the image (company logo) is not getting rendered in default2.aspx at runtime. However when I directly browse the default2.aspx by setting it as startup page the logo/image is displayed at runtime.
Note: This scenario is being tried from within visual studio 2015 and is not yet being deployed.
Any suggestions would be appreciated as to why the image is not being rendered when the switch (SiteIsActive = N) and being re-directed to default2.aspx
Code for default2.aspx below:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<head runat="server">
<link href="~/Image/BrightSide.css" rel="stylesheet" type="text/css"/>
<title>AAA</title>
</head>
<body id="bodyindex">
<div id="wrap" style="width: 1000px;">
<div id="header">
<table style="background-color: rgb(255, 255, 255);" width="100%">
<tbody>
<tr>
<td width="15%">
<img src="~Image/AAA_Image.jpg" /></td>
<td width="32%">
<h1 style="font: bolder 3.1em 'Trebuchet MS',Arial,Sans-serif;">AAAy</h1>
</td>
<td align="right" width="53%"> </td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
<div id="content-wrap">
<h1 align="center">The AAA website is currently unavailable due to scheduled maintenance.<br />
<br />
We are sorry for the inconvenience. Please re-visit the site.
<!-- <div class="caption" style="height:50px;"><div class="content"></div></div> -->
</h1>
<br>
<br>
<br>
<div style="clear: both;">
<!-- wrap lower portion-->
<div style="width: 75%; float: left;">
<h1> </h1>
<p> </p>
</div>
<br>
<!-- content-wrap ends here -->
</div>
<!-- footer starts here -->
<div id="footer">
<div class="footer-left">
<p class="align-left">
� 2017 <strong>AAA</strong>
</p>
</div>
<div class="footer-right">
<p class="align-right"> </p>
</div>
</div>
<!-- footer ends here -->
<!-- wrap ends here -->
</div>
</div>
</body>
</html>
Code defined in Application_BeginRequest.
The logic I implemented is within the two comments "// Logic for maintainence page". Also please note I have included some logic for IPAddress exclusion where for such IPs the regular websites will be shown and for others the maintenance page is dispalyed:
public void Application_BeginRequest(object sender, EventArgs e)
{
// Check the application validity
LicenseHelper.CheckValidity();
// Enable request debugging
// Application start events
FirstRequestInitialization(sender, e);
CMSRequest.BeforeBeginRequest(sender, e);
// Check if Database installation needed
if (InstallerFunctions.InstallRedirect())
{
return;
}
// Enable debugging
SetInitialDebug();
CMSRequest.AfterBeginRequest(sender, e);
// Logic for maintainence page
HttpContext context = HttpContext.Current;
string maintenancePage = System.Configuration.ConfigurationManager.AppSettings["Maintenance_RedirectTo"];
string siteIsActive = System.Configuration.ConfigurationManager.AppSettings["SiteIsActive"];
if (siteIsActive != null && siteIsActive.Equals("N", StringComparison.CurrentCultureIgnoreCase))
{
if (!context.Request.Path.Equals("/" + maintenancePage))
{
string exceptionIP = string.Empty;
string ips = System.Configuration.ConfigurationManager.AppSettings["Maintenance_Redirect_Exceptions"];
string ipAddress2 = Request.ServerVariables["HTTP_X_FORWARDED_FOR"];
if (ipAddress2 == null || ipAddress2.ToLower() == "unknown")
ipAddress2 = Request.ServerVariables["REMOTE_ADDR"];
//ipAddress2 = "127.0.0.1";
if (ips != null)
{
System.Collections.Generic.List<string> ipAddressList = new System.Collections.Generic.List<string>(
ips.Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries));
if (ipAddressList != null)
{
exceptionIP = ipAddressList.Find(delegate (string ipAddress)
{
return ipAddress.Equals(ipAddress2, StringComparison.CurrentCultureIgnoreCase);
});
}
}
if (exceptionIP == null || exceptionIP.Length <= 0)
{
this.Response.Redirect(maintenancePage);
}
}
}
// Logic for maintainence page
}

Synchronizing two components of the same kind in the same parent when only one item is clicked

I am new to Angular 2 and Typescript and am working on a pager component that has been added to a component containing a table. The pager works fine, but I have two of these pagers one on top of the table and another below. When the next button on the first pager is clicked, I need to have both pagers move forward or backward so they are in sync. I've seen suggestions for using a shared service, but I am not sure if that would work since they are the same component.
How can I either trigger the unclicked button to also think it has been clicked, or simply mirror the behavior of the one pager component onto the other pager component? Does Angular 2 have a way of doing this?
Parent HTML:
<table-pager [(resort)]="resort" [recordPerPage]="recordPerPage" [totalItems]="totalItems" (onSetPage)="setPage($event)"></table-pager>
<table class="uReportStandard" id="udfTable">
<thead class="highlight-row">
<tr>
<th role="columnheader">Remove / Edit</th>
<th *ngFor="let column of columns" role="columnheader" (click)="setSort(column)">
{{column.name}}
<img *ngIf="column.sortOrder == 'ASC'" src="./images/sort_asc.png" alt="Ascending" title="Ascending" class="tableIcon" />
<img *ngIf="column.sortOrder == 'DESC'" src="./images/sort_desc.png" alt="Descending" title="Descending" class="tableIcon" />
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let udf of userDefinedField">
<td class="tableIcons">
<img src="./images/remove.png" alt="Remove"
(click)="deleteRow(udf.ID, 'Are you sure you want to remove the field: ' + udf.NAME)"
title="Remove" class="tableIcon" />
<img src="./images/edit.png" alt="Edit" title="Edit" class="tableIcon" (click)="edit(udf.ID, udf.NAME, udf.DESCRIPTION)" />
</td>
<td>{{udf.ID}}</td>
<td>{{udf.NAME}}</td>
<td>{{udf.DESCRIPTION}}</td>
</tr>
</tbody>
</table>
<table-pager [(resort)]="resort" [recordPerPage]="recordPerPage" [totalItems]="totalItems" (onSetPage)="setPage($event)"></table-pager>
Pager Component:
export class PagerComponent implements OnInit, OnChanges {
#Input() recordPerPage: number;
#Input() totalItems: number;
#Input() resort: boolean = false;
#Output() onSetPage: EventEmitter<any> = new EventEmitter<any>();
totalPages: number;
startIndex: number;
endIndex: number;
currentPage: number;
constructor() { }
ngOnInit() {}
ngOnChanges(changes: any) {
console.log('OnChange called');
//get total pages count
let pagesCount = this.totalItems / this.recordPerPage;
//If there is a remainder then add one to the page
if((this.totalItems % this.recordPerPage) > 0){
pagesCount = pagesCount + 1;
}
this.resort = false;
this.totalPages = pagesCount;
this.setPage(1, null);
}
setPage(page: number, direction: string = null) {
if(direction === 'previous') {
if (this.startIndex <= 1) {
console.log('On the starting page');
return;
}
} else if (direction === 'next') {
if (this.totalItems === this.endIndex) {
console.log('On the last page');
return;
}
} else if (page < 1) {
console.log("Invalid page number.");
//callback
//this.onSetPage.emit(0);
return;
}
this.currentPage = page;
this.startIndex = 1 + (page-1)*this.recordPerPage;
this.endIndex = this.startIndex + +this.recordPerPage - 1;
if(this.endIndex > this.totalItems) {
this.endIndex = this.totalItems;
}
let resortHolder = this.resort;
//callback
this.onSetPage.emit({page, resortHolder});
}
Pager HTML:
<div *ngIf="totalItems == 0">
<p>No records found</p>
</div>
<div *ngIf="totalPages >= 2" class="pagination">
<span [ngClass]="{disabled:currentPage == 1}" (click)="setPage(currentPage - 1, 'previous')">
<img src="./images/previous.png" alt="Previous" title="Previous" class="tableIcon" />
Previous
</span>
<span>{{startIndex}} - {{endIndex}} of {{totalItems}}
</span>
<span [ngClass]="{disabled:endIndex == totalItems}" (click)="setPage(currentPage + 1, 'next')">
Next
<img src="./images/next.png" alt="Next" title="next" class="tableIcon"/>
</span>
</div>
If you don't want to use a shared service an alternative is you could have the two pager components communicate via #Output events e.g. 'next clicked', see this related question
<table-pager #firstPager (nextClicked)="secondPager.clickNext($event)"></table-pager>
// the table html ..
<table-pager #secondPager (nextClicked)="firstPage.clickNext($event)"></table-pager>
Another (simpler?) way would be to change the template of you pager component so that the pager component displays a 'top' and 'bottom' pager, and use content project to place the table between them:
Pager html template:
<!-- Top pager -->
<div *ngIf="totalPages >= 2" class="pagination">
<span [ngClass]="{disabled:currentPage == 1}" (click)="setPage(currentPage - 1, 'previous')">
<img src="./images/previous.png" alt="Previous" title="Previous" class="tableIcon" />
Previous
</span>
<span>{{startIndex}} - {{endIndex}} of {{totalItems}}
</span>
<span [ngClass]="{disabled:endIndex == totalItems}" (click)="setPage(currentPage + 1, 'next')">
Next
<img src="./images/next.png" alt="Next" title="next" class="tableIcon"/>
</span>
</div>
<!-- Content projected here -->
<ng-content></ng-content>
<!-- Below pager -->
<div *ngIf="totalPages >= 2" class="pagination">
<span [ngClass]="{disabled:currentPage == 1}" (click)="setPage(currentPage - 1, 'previous')">
<img src="./images/previous.png" alt="Previous" title="Previous" class="tableIcon" />
Previous
</span>
<span>{{startIndex}} - {{endIndex}} of {{totalItems}}
</span>
<span [ngClass]="{disabled:endIndex == totalItems}" (click)="setPage(currentPage + 1, 'next')">
Next
<img src="./images/next.png" alt="Next" title="next" class="tableIcon"/>
</span>
</div>
And the parent template:
<table-pager [(resort)]="resort" [recordPerPage]="recordPerPage" [totalItems]="totalItems" (onSetPage)="setPage($event)">
<table> .. your table definition ... </table>
</table-pager>

Angular html not loading properly

Sorry if this has a really obvious answer, I'm fairly new to Angular JS and this is something that I have been stuck on for an annoyingly long time.
To give you a bit of background, I am calling ng-repeat on a directive as follows:
<div ng-controller = 'salesctrl'>
<salecell ng-repeat = "kpi in kpis" kpi ="kpi"></salecell>
</div>
With the directive being described as follows:
.directive("salecell", function(){
return{
templateUrl: "sale-cell-template.html" ,
restrict: 'E',
scope: {
kpi: '='
},
link: function(scope){
return scope;
},
controller: function($scope){
if(typeof $scope.kpi != 'undefined'){
$scope.kpi.value = 0;
$scope.increment = function(){
$scope.kpi.value++;
}
$scope.decrement = function(){
if($scope.kpi.value != 0){
$scope.kpi.value--;
}
}
}
}
};
})
and the attached controller:
.controller("salesctrl", function($scope, $rootScope, SalesSvc){
SalesSvc.query().$promise.then(function(data){
$scope.kpis = data;
});
$scope.submit = function(){
SalesSvc.save($scope.kpis).$promise.then(function(){
for(var i = 0; i < $scope.kpis.length; i++){
$scope.kpis[i].value = 0;
}
});
$rootScope.$emit('salecreate');
}
})
The issue that I am having is that, regardless of the contents of my associated template, only the outer element is being rendered. For example if I have:
<tr>
<div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
<div ng-show="!kpi.dollar" class="col-md-6">
<div id="spinner4">
<div class="input-group" style="width:150px;">
<div class="spinner-buttons input-group-btn">
<button ng-click="decrement()" type="button" class="btn spinner-up btn-warning">
<i class="fa fa-minus"></i>
</button>
</div>
<input ng-model="kpi.value" type="text" class="spinner-input form-control" maxlength="3" >
<div class="spinner-buttons input-group-btn">
<button ng-click="increment()" type="button" class="btn spinner-down btn-primary">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div ng-show="kpi.dollar" class="col-md-6">
<div class="input-group m-bot15" style="width: 150px;">
<span class="input-group-addon">$</span>
<input ng-model="kpi.value" type="text" class="form-control">
</div>
</div>
Nothing will load on the page, and likewise, if I have:
<tr>
<h1> Hello World! </h1>
</tr>
Nothing is loaded either.
Things I have already checked:
-I have made sure that both $scope.kpis and $scope.kpi are defined
-I have ensured that the template is actually being called (both by inspecting elements and by calling a console.log from within the template)
-A bit of searching around suggested that it might be an error within the template, but this seems strange given that it doesn't work even with a near-empty template.
The only other thing that I can think to add is that when I was using console.log in the template that was visible in the element inspector (Chrome), but nothing else has been.
Let me know if you need anything else, and once again I hope this isn't something really stupid that I have missed.
Ensure that the content inside the table are wrapped in <td> tags. Currently they are directly inside <tr> tags and is invalid HTML.
<tr>
<td>
<div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
...
</td>
</tr>