Page-Break-After, CSS & DIV

[jimmyjimjim]

I have been creating a project that sometimes uses a lot of DIV's to display information. A new requirement for the project is that it allows the user to add page breaks.

The only problem is that each DIV is positioned absolutely as they can appear anywhere on screen after loading the relevant attributes from a database.

I thought Page Break After would sort me out but I'm having difficulty unless I position the objects statically or relatively (which doesn't keep the correct cooardinates). I've been reading more information about it online and it seems that it doesn't work with absolutely positioned divs by design.

Can anyone suggest another way to achieve this? The objects must be positioned absolutely in order to get them where they need to be on the screen.

Hope someone can help.

Jimmy.

[felgall]

So make them position:absolute in the media="screen" stylesheet and position:relative in the media="print" stylesheet.

[jimmyjimjim]

I had to make a few changes to adopt this and wasn't sure if it was going to work from the tests I had run already although I had not tried this specifically.

Unfortunately it does not work. I can get the page break object to be hidden for print outs showing the css and other code is working, but both IE and FF do not print with page breaks.

I'm so gutted! Thanks for your help to date, any other suggestions?

[jimmyjimjim]

I have posted this once before but unfortunately did not get any information that provided a cure. I thought maybe because replies had been sent that people were not interested in reading it any more.

I have been creating a project that sometimes uses a lot of DIV's to display information. A new requirement for the project is that it allows the user to add page breaks.

The only problem is that each DIV is positioned absolutely as they can appear anywhere on screen after loading the relevant attributes from a database.

I thought Page Break After would sort me out but I'm having difficulty unless I position the objects statically or relatively (which doesn't keep the correct cooardinates). I've been reading more information about it online and it seems that it doesn't work with absolutely positioned divs by design.

Can anyone suggest another way to achieve this? The objects must be positioned absolutely in order to get them where they need to be on the screen.

Hope someone can help.

Jimmy.

The one and only reply I got was...

<quote>So make them position:absolute in the media="screen" stylesheet and position:relative in the media="print" stylesheet.</quote>

From Felgall

I did adapt my code and try this but it has not helped, it still does not work. It only needs to work in IE if that is any help to anyone.

[DaveSW]

coudl you show us a graphic of your layout? maybe someone can come up with something totally different.

[jimmyjimjim]

There isn't really a standard graphic but I could mock one up if it helped. Basically it's a project to allow sales people to draw up or edit an agreement for new customers under a lease agreement, each one needs to be different.

It involves dragging and dropping div's with different properties set by the user (salesperson) to provide the layout. Text and variables can be entered so when the customer accesses the page it fills in the relevant information for the customers name and address, company details and the amount they have to pay for what they have chosen to order on the fly.

I need to be able to insert page breaks but this has proven a lot more tricky then it was first thought, it is not mentioned in many places that I have seen that you cannot page break after an absolutely positioned div (I have to realise that this is the case though - I'm sure there must be a clever workaround however).

[jimmyjimjim]

I have posted several times about this but usually only get one response that cannot be of much help.

Basically, I need to have page breaks after an absolutely positioned div. page-break-after seems to only work with relatively positioned elements. I have only found reference to this in one place from the searches I have done though.

I have carried out some experiments in IE which work okay, for example having the absolutely positioned div's in a realtively postioned table, but this will not work in other browsers (as they follow the standards correctly for CSS).

Can anyone help me include page breaks after absolutely positioned div's. It has become a requirement for the project I am working on.

Thanks in advance for any help. See some of my other posts if you think it might help.

JJJ.

[David Harrison]

Could you provide some sample code?

[jimmyjimjim]

A quick and very simple example...

Head stays the same...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

Body from an example that would work...

<body>

<div style="position: relative; top: 50px; left: 50px">hello</div>

<div style="page-break-after: always; position: relative; top: 100px; left: 50px">hellodiv</div>

<div style="position: relative; top: 150px; left: 50px">hello</div>


</body>
</html>

Body from an example that doesn't work...

<body>

<div style="position: absolute; top: 50px; left: 50px">hello</div>

<div style="page-break-after: always; position: absolute; top: 100px; left: 50px">hellodiv</div>

<div style="position: absolute; top: 150px; left: 50px">hello</div>


</body>
</html>

Check it out in a print preview.

The absolutely positoned elements could be anywhere on the screen and one needs to cause a page break.

Since the introduction of this new requirement and seeing as little feedback has been forthcoming I think I'm going to have to back to drawing board but that would be a right pain in the ass, I've spent a lot of time getting all other parts of the project working.

I am hoping there is a workaround or someone can offer me some very helpful advice. See some of my others posts as they are based around the same sort of thing and might help give a better insight.

JJJ

[David Harrison]

It seems as though absolute positioned elements are not affected by page breaks since they are taken out of the flow of the page and positioned relative to (in this case) the top left corner of the <body> tag.

Therefore it would appear that no, it is not possible to create page breaks before or after absolutely positioned elements, however, what you could do is put your absolutely positioned elements inside a <div> tag, and apply position:relative;page-break-after:always; to that. That would seem to be the easiest way at this point to get a page break.

However may I suggest that in future you try to stay away from using positioning for the layout of your pages, it's not the most flexible way to do it.

[David Harrison]

I've just read both of your other threads *frown* and I see now why you are positioning everything, however it should be possible to use either JavaScript or a server-side script to create some <div>'s to contain things who's specific purpose is to create the page breaks. In effect each <div> would be acting as it's own page, although I guess that if some <div>'s ran a bit long then they could be split into multiple pages themselves.

I have merged all of the threads into one.

[jimmyjimjim]

Thanks for that. What happened to my other post in between your most recent and the one before?

I would be extremey grateful to anyone who can offer me suggestions as to how this could be done both client side and server side so I can work them in to my project.

Thanks,

JJJ

[David Harrison]

I don't know what happened to your other post, the database started playing up though so it's possible that it was just lost. Or maybe you started writing the post, then I merged the threads and then you submitted your post to a thread that didn't exist anymore. Sorry about that.

Having not seen the application that you're working with I have no idea how to go about this, however I can describe the logic behind it. To make the explaining easier, I'm going to call the relatively positioned <div> tags that create the page breaks "virtual pages" and all absolutely positioned elements "floaters".

To begin with, you would have everything in one huge virtual page, then say if someone is dragging stuff around and then they decide they want a page break after a certain element. You would find that floaters very bottom co-ordinates and put everything below that into a virtual page (this can be accomplished via the DOM by deep cloning (http://www.mozilla.org/docs/dom/domref/dom_el_ref35.html) the floaters, removing them from the page, creating a new virtual page immediately after the current virtual page and then adding the clones into it).

When you are finding which floaters need to go into a new virtual page you would need to check the absolute position co-ordinates of each and every floater on the page that is in the same virtual page. If the top edge of the floaters are lower down than the floater the user wants to put a page break after then they go into a new virtual page.

Problem one. Because some floaters will have been moved to a new virtual page, their co-ordinates will be relative to the new virtual page rather than the old one, this therefore means recalculating all of the top absolute position co-ordiantes for all floaters that were moved, this shouldn't prove to be all that difficult to solve though.

Problem two. The user could create a virtual page and then move a floater lower down than the bottom marker for that virtual page, or move it off the top of the virtual page. This means that you have to recalculate the location of a floater in the code every time the user lets go after clicking and dragging. Depending on how far they've moved it, you may need to deep clone it and move it into a different virtual page and then calculate it's new co-ordinates for that page.

Problem three. I assume that you would like to have the ability to save layouts in a database on a server so that they can be re-called and looked at. Therefore you've got to find some way to send all of that data back to the server, it will most likely be neccessary to alter the order of floaters in the source code so that they are all in the correct virtual pages. Alternatively, you could just find someway to mark the virtual page cut-off markers and let the database store that, then when the page is handed back to the browser, let it recreate the virtual pages and recalculate the positions of all of the floaters within them.

Now all that, to me, sounds like a hell of a lot of work that would take some time to complete. I can help you with some of it if you like however there's no way that I'm gonna write it all (unless you'd like to pay me a rather hefty sum of money).

[jimmyjimjim]

Thanks for your response. I had already become aware it was not possible to do it in the way that I originally wanted, that's what my posts were saying - I was after a potential workaround which you then go in to detail so thanks for the suggestions there. I think I should be able to take care of things now. I have come across a new little quirk which I will post a new topic on.

Thanks again.

JJJ.

[David Harrison]

Happy to help. :)