Can CSS do this? Options

[CharlesEF]

Sorry for the crappy title, I wasn't sure how to word it. Anyway, my page layout is:

CODE

<label>XXXX:</label><br>
<input>

I want to prevent the label from printing on 1 page while the input is printed on another page. Can CSS do this?

Thanks for any input,

Charles

[Christian J]

Not sure what you mean, something like Page breaks?

https://www.w3.org/TR/CSS21/page.html#page-breaks

[coothead]

I want to prevent the label from printing on 1 page while
the input is printed on another page.
Can CSS do this?

Do you mean not print as in a pdf file for example or
as display or not display in separate web pages?

coothead

[pandy]

He says not print.

Give a containing element (add one if there isn't a suitable one already) an id (or class of you want to use this for more than once on a page) then make it display: none in a print style sheet.

CODE

@media print {
  .noprint { display: none }
}

[CharlesEF]

Ok, let me try again. I don't want to hide anything. When I have a page loaded and hit the 'Print' button I may get a 1, 2 or 3 page print out. I want the label and input to print on the same page. Of course, the input could be a select or textarea but I still want them to print on the same page.

I had already looked at CSS page breaks but haven't gotten it to work yet, hence the question.

If I need to change the HTML layout a little that's fine. I just want them printed on the same page.

[coothead]

Hi there CharlesEF,

If my understanding is correct, you want avoid the label
and it's corresponding input being on different pages.

CSS can easily do this...
link

CODE

<link rel="stylesheet" href="your-title.css" media="screen, print">

HTML

CODE

<label>XXXX:</label><br>
<input>

CSS

CODE

label + br {
   break-after: avoid;
}

Further reading
MDN - break-after

coothead

[CharlesEF]

That CSS is what i have tried, except I didn't include the '+ br' part. Let me try it out and report back.

Thanks for the tip.

[CharlesEF]

I'm still testing. I find that if the printer setting has 'Shrink to fit page' it appears to work. But, if I change the setting to 125% or higher then it appears to not work. Some pages have the label (field name) printed at the bottom of the page. While the input (data) is printed at the top of the next page. I also see some images partly printed at the bottom of the page while the remaining part is printed at the top of the next page.

This is what I want to avoid. If there is not enough room at the bottom of the page to print both the label and input (or select or textarea or img) then I want the whole section to print at the top of the next page.

[coothead]

Hi there CharlesEF,

If you want the label and it's input to stay together then I
would suggest that you place them in a container like this...

HTML

CODE

<div class="no-break">
  <label>XXXX:</label><br>
  <input>  
</div>

CSS

CODE

.nobreak {
   break-after: page;  
}

coothead

[Christian J]

I want the label and input to print on the same page. Of course, the input could be a select or textarea but I still want them to print on the same page.

Could the TEXTAREA be filled with an unknown amount of user content? Without any limits to such content it might be impossible to print on a single page of paper...

[CharlesEF]

Ok, I think I figured it out. When using 'labe + br' as the CSS selector I think it didn't work because the closing label tab didn't surround the input tag. I would have had to modify many pages so I used the parent div instead. Everything appears to work correctly now. Images don't print on 2 pages anymore, at any scale. (tested up to 200%)

I don't think textareas cause any problem. In fact, any page with a textarea gets expanded to full height before printing. This way all text in the textarea is printed. I use the events onafterPrint and onbeforePrint for this.

Thanks for all the input.