• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Migrate HTML tables to CSS Positioning

 
Bartender
Posts: 9626
16
Mac OS X Linux Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
An application I maintain uses OpenOffice to convert HTML documents into PDF for the users's convenience. This has worked great for a while, but now has a snag: OOo doesn't deal well with nested tables. It truncates the PDF output to a single page and some of our documents run into the 10's of pages. So I tried to replace the existing nested table layout with CSS and even the simplest task is problematic. For example, we have some questions which are dependent on previous answers. We indicate dependency with indenting, an image in the margin, and the wording of the question:

This layout is trivial to do with tables:

But using CSS is painful. I want to do something like this:

But DIV's, being blocks, stack one on top of the other, so the indent image ends up on top of the dependent question. I also don't want to specify the height of the indent image as the height is dependent on the associated question and answer fields. Is there a way to get CSS positioning to behave like TABLE's?

[ May 05, 2006: Message edited by: Joe Ess ]
[ May 05, 2006: Message edited by: Joe Ess ]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Not sure I understand this statement:

But DIV's, being blocks, stack one on top of the other,



By default, divs will not overlap each other unless you start messing with the CSS positioning.

Is that what you mean by "stack"?

Or do you mean, laying out each in their own "row"?

If the latter, you can modify that behavior with a combination of CSS positioning and the float CSS rule. When using float, you may also need to become familar with the clear rule.
[ May 05, 2006: Message edited by: Bear Bibeault ]
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Should render almost the same exact way as your table.

 
Joe Ess
Bartender
Posts: 9626
16
Mac OS X Linux Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:

Or do you mean, laying out each in their own "row"?


Correct.


If the latter, you can modify that behavior with a combination of CSS positioning and the float CSS rule. When using float, you may also need to become familar with the clear rule.



I've fooled around with float but I can't figure out how to make the size of the image DIV dependent on the size of the corresponding question:




Eric:
That looks great, but I need to be able to have a number of sub-levels. Consider a question like:

The current code will handle 20 levels, though I can only recall seeing 3-4 levels used.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
well you just put a sub inside of a sub



Another way is to have different subs and you just change the amount of indent

I think that way is cleaner than the first way, but the way the bg image works would have to change (positioning on bg image needs to be set for each level, to lazy to do it above.)

Eric
 
Joe Ess
Bartender
Posts: 9626
16
Mac OS X Linux Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A sub inside a sub. It's obvious now that you mention it. Doing that will probably be easier to shoehorn into the existing table-based taglib and servlets than your other option.
Thanks for the help!
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Using CSS is so much easier after you bang your head to get it to look right at first. Reason why it is easier if they saw they want something to be red, one line of text to change.

Eric
 
Joe Ess
Bartender
Posts: 9626
16
Mac OS X Linux Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Apparently OOo's CSS rendering is broken. If I use nested subs discussed above it looks great in a browser:


But is very broken in OOo, and the PDF exported from there:


Now, the example using float kind of works in OOo. The indentation is preserved, but the background image is not displayed. If I could get something like that working it may be an option.
I'm leaning towards making a new print-only view using OL or UL tags. That would probably be easiest as I could make the browser version pretty using tables which I'm more comfortable/competent using and I could address the OOo-only issues seperately.
reply
    Bookmark Topic Watch Topic
  • New Topic