I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised)
The problem is, I've done a table, that is made full of controls (input fields).
It's simple drug prescription formula, and the doctor can prescribe as many drugs as he wants.
In the web browser it looks good:print-browser
But, when I want to print it... it breaks: print-printer.
The code, looks like this:
<div class="row">
<div class="col-sm-3 text-center">
<label>Wpisz nazwę leku</label>
</div>
<div class="row col-sm-9">
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
<div class="row" ng-repeat="drug in visit.prescribedDrugs">
<div class="col-sm-3">
<select class="form-control" ng-options="drug.id as drug.name group by getDrugFullTypeName(drug) for drug in technical.drugs track by drug.id"
ng-model="drug.drugItemId"></select>
</div>
<div class="row col-sm-9">
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose" class="form-control" type="text" ng-model="drug.initialDose">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose"
class="form-control"
type="text"
ng-model="drug.targetDose"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<p class="input-group ">
<input type="text"
name="PrescribedDrugCalendar"
id="newPrescribedDrugCalendar"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="drug.targetDoseFrom[$index]"
is-open="isPrescribedTargetDoseFromCalendarOpened[$index]"
close-text="Zamknij"
placeholder="rrrr-mm-dd"
current-text="Dzisiaj"
clear-text="Wyczyść"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated" />
<!--ng-required="true"-->
<span class="input-group-btn hidden-print">
<button class="btn btn-default"
ng-click="openPrescribedTargetDoseFromCalendar($event, $index)"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-2 text-center">
<input type="checkbox" id="CBisEffectivelyMaximalForPrescription" ng-model="drug.isEffectivelyMaximal">
</div>
<div class="col-sm-1 text-center hidden-print">
<button type="button"
class="btn btn-default text-center"
ng-click="removePrescribedDrug($index)"
ng-disabled="visit.prescribedDrugs.length==1">
<span class="glyphicon glyphicon-minus text-center" aria-hidden="true"></span> Usuń
</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>
did you tried adding a print stylesheet ?
<link rel="stylesheet" type="text/css" media="print" href="print.css">