CSS Question
How to print nicely table in bootstrap that is formed with controls?
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>
And description for it:
I have labelled row:
Wpisz nazwę leku
<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>
And control row: which goes like:
- Input field (select)
- Input field (integer)
- Input field (integer - activity based on buisness logic)
- Calendar
- Checkbox
- Remove item button - it's hidden print.
But, it won't print as rows - instead of it creates as many rows, as many controls.
Where I have made mistake? I'm quite new in bootstrap/angular but I've read topics about printing.
In the index page I have:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>
And i also tried to make my custom.css file with media="print" - but I don't know how to fix this problem.
Edit: Also - how to delete this little cursor on input fields, fe. This -> http://imgur.com/dFMVKQY
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
did you tried adding a print stylesheet ?
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download