I do not understand position

OL Connect Professional Designer
1

I would like the Interest Rate Detail table to snap to the bottom of the Transactions table, as there can be multiple transaction lines. The Transactions table is set to absolute position, because it will always start in the same place on the page. What positioning do I set the Interest Rate table for?

table
table770×446 5.12 KB

When I convert to inline, the table moves up to the top of the page. Which position is :inline anyway? Static? Fixed? None of the positioning options give me results I expect, and the poisitioning options in the table formatting box do not change the position no matter what I enter.

Sometimes I feel like I am getting this, and then I get hung up on something so simple.

2

You could start by reading this interesting tutorial on positionning.

The Transaction table is out of the normal flow of the page as you removed it by making it absolute. Therefore, the Interest Rate table cannot be snapped (old PP7 terms :wink: ) to the bottom of it.

Assuming that the Transaction table is the first dynamic table of your page, what you should do is take all that there in fixed position on the page and put that on a Masterpage. Then set the Masterpage header and footer.

Then back on you section, put your Transaction table in a static or relative positionning and then add your Interest table.

3

Yes, thank you for this article. I did eventually realize what was happening. I even tried to cancel this post while it was being reviewed.

I actually have 3-4 tables on page 1 of this statement. but most have only 2-3 rows. I positioned them all as absolute because they do not move, so everything on the page was “out of the flow” (a concept I am still struggling with). So when I changed the position attribute of the Interest Rate table, it moved all the way up to the top margin of the page, the first element in the flow. Everything was behaving as expected, I just didn’t know what to expect.

I changed all tables to inline (fixed or static?) and used margins to position them, which gave me the desired results. It is just a very different way of laying out a page than I am used to.

4

I know your struggle, we all had it, those of us used to the PlanetPress Suite way of things, neophyte on all things HTML, CSS and Javascript.

We had to learn it really quick as we had to be the front line to help customers, transitionning from Classic to Connect PlanetPress. So it is not just a new language but a new way of approaching the expected result.

I’d say your best bet is to look at what you want as a result and stopped that little mental voice that always try to make a link to what was and no longer is A.K.A the PlanetPress Suite way :wink:

5

If the requirements are:

  1. Transactions table is absolute positioned
  2. Interest Rate table is directly below the Transactions table

.. I suggest that you introduce a container:

<div id="container">
    <table id="transactions"></table>
    <table id="interest-rate"></table>
</div>

Only the container would be absolute positioned.

The two tables should not have any explicit position style. This makes them both “part of the flow” within the container, with the Interest Rate table’s top edge flush against the Transaction table’s bottom edge. Moving the container automatically moves both tables.

The caveat is that you need to make sure the container (with both tables) fits on a single page, but I understand from your other posts that this is guaranteed.

Notes:

  • You do need to specify position: static; that is the default value. If an element should be part of the flow, you can simply omit the position style.
  • You should never use position: fixed in a print section. Its behavior is extremely problematic, we do not support it for paginated content.