How to print nicely table in bootstrap that is formed with controls?

Question

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 -> https://i.stack.imgur.com/R9kkJ.jpg

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

did you tried adding a print stylesheet ?

<link rel="stylesheet" type="text/css" media="print" href="print.css">

More info.

edited May 23 '17 at 12:31

Community

1
1

answered Dec 17 '15 at 15:20

Michał Dopieralski

450
2
14

Yes i did. I mean it's the simple, standard bootstrap print option. ( ) But it breaks rows. I think i did wrong in creating my div structure - too much div nesting, or i did it in wrong way. Other part of document seems to print good (or acceptable good). But this section does not. Ps. i've read this topic, but still does not apply to the problem part. – artur_learning Dec 17 '15 at 15:39

How to print nicely table in bootstrap that is formed with controls?

1 Answers1