Printing: fix the six dives per page layout

Add container with height 100% which contains the six dives, so dives
don't overflow the page.

Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
Signed-off-by: Gehad elrobey <gehadelrobey@gmail.com>
This commit is contained in:
Gehad elrobey 2015-08-16 15:45:15 +02:00 committed by Lubomir I. Ivanov
parent 67bfa9f968
commit b19d07c61c

View file

@ -40,11 +40,11 @@
.mainContainer { .mainContainer {
width: 50%; width: 50%;
height: 33.333333%; height: 33.333%;
margin-left: 0%; margin-left: 0%;
margin-right: 0%; margin-right: 0%;
margin-top: 0; margin-top: 0%;
margin-bottom: 0; margin-bottom: 0%;
overflow: hidden; overflow: hidden;
page-break-inside: avoid; page-break-inside: avoid;
float: left; float: left;
@ -111,12 +111,20 @@
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: {{ template_options.line_spacing }}; line-height: {{ template_options.line_spacing }};
} }
#sixdivespack {
width: 100%;
height: 100%;
}
</style> </style>
</head> </head>
<body data-numberofdives = 6> <body data-numberofdives = 6>
<div id="body_div"> <div id="body_div">
{% block main_rows %} {% block main_rows %}
{% for dive in dives %} {% for dive in dives %}
{% if forloop.counter|divisibleby:6 %}
<div id = "sixdivespack">
{% endif %}
<div class="mainContainer"> <div class="mainContainer">
<div class="innerContainer"> <div class="innerContainer">
<div class="diveDetails"> <div class="diveDetails">
@ -173,6 +181,9 @@
</div> </div>
</div> </div>
</div> </div>
{% if forloop.counter|divisibleby:6 %}
</div>
{% endif %}
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
<div id="footer"> <div id="footer">