The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Can CSS do this?
CharlesEF
post Nov 10 2024, 02:12 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,996
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 10 2024, 03:21 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



Not sure what you mean, something like Page breaks?

https://www.w3.org/TR/CSS21/page.html#page-breaks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Nov 10 2024, 03:32 PM
Post #3


Advanced Member
****

Group: Members
Posts: 234
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(CharlesEF @ Nov 10 2024, 08:12 PM) *


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 10 2024, 09:40 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,766
Joined: 9-August 06
Member No.: 6



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 }
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 19 2024, 12:44 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,996
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Nov 19 2024, 03:26 PM
Post #6


Advanced Member
****

Group: Members
Posts: 234
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 20 2024, 11:40 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,996
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 21 2024, 05:35 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,996
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Nov 21 2024, 06:24 PM
Post #9


Advanced Member
****

Group: Members
Posts: 234
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 21 2024, 07:25 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Nov 19 2024, 06:44 PM) *

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...

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 22 2024, 04:49 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 1,996
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th December 2024 - 12:09 PM