How to print nicely while the content show in div fit to each page without any extra blank page?
#page {
width: 1.97in;
height: 1.57in;
margin: 0;
padding: 0;
}
.label{
padding: 0;
border-collapse: collapse;
width: 1.97in;
height: 1.57in;
float: left;
display: block;
clear: both;
overflow: hidden;
border-top: 1px dotted;
page-break-after: always;
border-bottom: 1px dotted;
}
This is my label printer setting
I want to print the content as label sticker, but it always show extra blank when printing. How can i configure it?
You can edit media print
#page {
width: 1.97in;
height: 1.57in;
margin: 0;
padding: 0;
}
#media print {
html, body {
width: 1.97in;
height: 1.97in;
}
}
Related
I have the following #page
#page {
size: 210mm 297mm;
background: white;
display: block;
margin-bottom: 15%; // eliminates the page size on the bottom
}
I need to show footer to this left-out margin using flying-saucer-pdf version 9.1.22.
I tried the following code but it's not working:
#media print {
div.divFooter {
margin-bottom: -15% !important; // I need to take advantage of the free space of #page margin bottom
padding: 0;
box-sizing: border-box;
position: fixed;
bottom: 0;
height: 80px;
z-index: 1;
}
}
I found the solution thanks to this, this and this pages.
#page {
size: 210mm 297mm;
background: white;
margin-bottom: 2.3cm;
#bottom-left {
vertical-align: top;
content: element(footer);
padding-top: 1px;
border-top:1px solid #777;
}
#bottom-center {
border-top:1px solid #777;
}
#bottom-right {
border-top:1px solid #777;
}
}
footer {
margin-top: 0.1cm;
display: block;
position: running(footer);
font-size: 8pt;
line-height:1.0;
}
And my html code contains the following element:
<footer>
<p style="font-size: 10pt;"><b>Note(s)</b></p>
<p>This is a printed copy.</p>
</footer>
Comment: Do not use position: block in body or #page because running() won't work.
I am creating a table inside a tab. I want to set the width of tab to the width of media screen but keep the width of table fixed to 630px. The max-width of div should be 400px. When the table does not fit into the div, it should display a horizontal scrollbar.
The div is successfully showing a horizontal scrollbar. But, when I resize the window, the scrollbar along with table is hiding inside the div. I want to display the scrollbar according to media width.
The example will become clear:JsFiddle
Please use tab and tab-content class width 100% may be it will work for you. I am sharing your complete code below with my changes i have done some width changes px to %, and what is the purpose for #model margin-right:1000px it will work find without margin.
#tabs-container {
height: auto;
overflow: hidden;
margin-bottom: 40px;
position: relative;
top: 60px;
border: 1px solid #ddd;
padding-top: 10px;
max-width: 400px;
}
.tab {
border: 1px solid #d4d4d1;
background: linear-gradient(#f8fbea, #fff);
margin: -20px 10px 10px 10px;
float: left;
position: relative;
top: 0;
z-index: 3;
width:100%;
height: auto;
overflow-x: auto;
overflow-y: hidden;
}
.tab-content {
padding: 10px;
width:100%
}
#model {
font-size: 12px;
margin: -10px -10px -10px -320px;
position: relative;
margin: 0 auto;
font-family: tahoma;
}
#model {
margin-right: 1000px;
width: 630px;
}
#model td {
vertical-align: middle;
}
#model tr:first-child td {
font-weight: 600;
text-align: center;
background-color: #ebebeb;
}
#model tr:nth-child(even) {
background-color: #f6f6f6;
}
#model tr:nth-child(odd) {
background-color: #fff;
}
I'm trying to make my search bar have a fluid input field width, whilst also having a 'search' button next to it.
It seems that the input field .search is way bigger than the containing element called .navigation-right, and it causes the button .search-submit to be pushed out of the containing div. See images below.
The Issue:
What I'm trying to make it look like:
Here is my code: (for convenience I left out the margin & padding values)
CSS
.navigation-right {
width: 282px; min-width: 282px;
height: 50px;
display: table-cell;
vertical-align: top;
border: 1px solid #920000;
}
.search {
width: 100%;
height: 30px;
display: table;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
}
HTML
<div class="navigation-right">
<form class="search">
<input class="search-input">
<button class="search-submit"></button>
</form>
</div>
Replace below class
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
Is there a specific need of using display: table; and display: table-cell;? It reminds me of the days when the only way of coding was using tables...
If I may suggest an alternative way of doing the same thing and arguably doing it better :) - the input element will occupy 100% of its parent with the button having a fixed width (good for fluid or responsive layouts).
You have set your search field (.search-input) to have a 100% width, so that will fill its parent. You need to reduce the width to around 250px
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
float:left;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
position:relative;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
position:absolute;
float:left;
}
Take this web example into account (it seems to have the same issue) I have the following CSS on my website (note the space between the #head and #body <div>'s):
#body {
display: table;
border-spacing: 0;
border-collapse: collapse;
}
#body-row {
display: table-row;
margin: 0;
padding: 0;
}
.column-left, .column, .column-right {
display: table-cell;
padding: 0px;
border: dotted 2px #89E;
}
.column-left, .column-right {
width: 190px;
font-size: .95em;
}
However, this still adds a space between the very top and bottom of the table-cell. Padding and margin do no seem to do anything for this. Advice?
.column-left, .column, .column-right {
vertical-align: top; /* add vertical align top to fix this issue */
display: table-cell;
padding: 0px;
border: dotted 2px #89E;
}
This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me - I do not want to specify a fixed height and width for the content.
http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem - resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.
Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.
Here is the CSS:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #eee;
}
.content {
background-color: #ddd;
padding: 0em 0em 2em; /* bottom padding for footer */
overflow: auto;
}
#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}
#status {
border: solid 1px #000000;
}
#status .error {
color: red;
font-weight: bold;
}
/* ------------------------------------------------------------------------------------*/
.char {
display: inline-block;
vertical-align: top;
}
.line {
white-space: nowrap;
}
/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
border: 2px groove threedface;
margin-top: 1em;
}
.fakeFieldset {
padding: 2px;
}
.fieldset > div.legend:first-child {
display: inline-block;
text-align: left;
margin-left: 10px;
background: #ddd;
position: relative;
top: -0.7em;
}
.merge-bottom {
margin-bottom: -2px;
}
/* ------------------------------------ Forms ------------------------------*/
form div {
white-space: nowrap;
}
form select, form input {
margin: 2px;
border: 1px groove;
}
form label:not(.same-line) {
width: 8em;
text-align: right;
display: inline-block
}
#cust-balance {
text-align: center;
}
.ccExpDate {
width: 2em;
}
#cust-salutation {
width: 4em;
}
.postalCode {
width: 7em;
}
#cust-ccAddress {
width: 20em;
}
// Updated with input from asker.
This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.
You need to give the header and the footer position:fixed
I also put some padding in the .content div to make room for the top header.
Like the following:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.content {
background-color: #ddd;
padding: 2em 0em; /* padding for footer and header */
}
.menubar {
position: fixed;
top: 0px;
width: 100%;
z-index:1;
}
#footer {
position: fixed;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}