Dynamic table not page breaking when using display: flex;

OL Connect Professional Designer
1

Using a dynamic table (See Below) it tries to place all but the last 2 items of the table onto a single page and then the last two rows are placed on a new page. I have tried removing the display: flex; and flex-direction: row; components of the CSS and it returns to page breaking normally, but i lose out on the desired effect of having the text being centered vertically on the page.

<table id="LetterBodyHolder" data-column-resize="" data-detail="" style="height: 7.5in; width :100%" data-expander="2019">
    <tbody>
        <tr data-breakable="" data-repeat="letterArr">
            <td class="BodyPara" style="text-align: center; width: 100%; height: 0.16in;">{{textRow}}</td>
        </tr>
    </tbody>
</table>
#LetterBodyHolder{
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 7.5in;
	max-height: 7.5in;
	page-break-inside: auto;
	white-space: pre-line;
	text-overflow: clip;
	word-break: break-all;
}
.BodyPara{
	text-align:center;
	font-size: 12px;
	padding-bottom: 0px;
	min-width: 7.5in;
	max-width: 7.5in;
}
2

Hello @SamSorenson,

The reason why this happen is because the pagination routines of OL Connect doesn’t work when the CSS display: flex; has been applied to the <table>-element.

3

@Marten is there a way to vertically center text while still maintaining pagination?

4

I assume that this is about the forum post Center text on page, while still overflowing - OL Learn, right? If so, I assume that this won’t be possible without scripting the whole lot.

5

Your container has a fixed height, so it will always fit on the page regardless of the amount of content it has. Pagination will not kick in. You will get similar behavior with display:block, although then the content will obviously not be centered.

If you remove display:flex the container will revert back to display:table and the fixed height will be ignored (browser limitation). This means the container will grow with its content. Now pagination will kick in.

Going back to your use case, if content does not fit inside a fixed-height container you want to duplicate that container and distribute content between the original and its copy. This needs to be scripted. There is no built-in feature in Connect that allows content to flow from one fixed-height element to another.

The overflows() script function should be helpful.

6

@Sander here is an update of the code I am using as of this morning, It is getting me almost entirely there, except for a few test records which still seem to break the pagination (ones that stretch more than 2 pages)
HTML:

<table id="LetterBodyHolder" anchor="page_media_1" style="width: 7.5in; height: 7.5in; top: 870px; left: 0px;" offset-x="48" offset-y="48">
    <tbody>
        <tr class="letter_row" data-breakable="">
            <td class="BodyPara" style="height: auto;">LETTER TEXT</td>
        </tr>
    </tbody>
</table>

CSS:

#LetterBodyHolder{
    display: flex;
    flex-direction: row;
    align-items: center;
    orphans: 4;
    widows: 4;
}
.BodyPara{
	text-align:center;
	font-size: 12px;
	padding-bottom: 0px;
	min-width: 7.5in;
	max-width: 7.5in;
	white-space: pre-line;
	text-overflow: clip;
	overflow: hidden;	
}

script:

for(var r = 1; r < record.tables['letterArr'].length; r++) { 
	results.parent().append(results.clone()); 
} 
query("#LetterBodyHolder > tbody > tr").each(function(i) { 
	this.find('LETTER TEXT').text( record.tables['letterArr'][i].fields["textRow"]); 
});

The overflow method makes sense and seems the key to solving my remaining problems. I think the piece I am unsure about is how to ensure the content spreads over new pages. Will I need to dynamically clone the page somehow? I know how to do that with overall sections, but not pages within a section. Copying the table container itself feels like it would still cause the same issue.

7

@SamSorenson if the container element is inline (not absolute positioned) and as large as the page, you could duplicate it in your script and Connect’s pagination algorithm should automatically create another page and push the copy to that page. Then you would still need a way to distribute content between the container elements. It is probably doable, but I’m afraid it will not be easy.

How about this instead:

Since your data is suitable for a table, start with a regular dynamic table (inline, no fixed height). If the table does not fit on the page, Connect’s pagination algorithm ensures it is split into multiple tables. Then you use a post pagination script to wrap each table in a display:flex container that aligns the content. You can prepare these containers on your master page.

Not sure if that will fit your use case, but here is a POC: AlignCenter.zip (7.4 KB)

Use the JSON sample data feature to import the json file.