PDF Creator Columns Left to Right Instead of Up and Down

Wappler General Need Help
1

I have set up PDF Creator on a Nodejs page successfully, however, it is show the columns left to right instead of up and down.

When viewing the page as a website, the columns display up and down.

Here is the code for the page:

<div class="row mb-3 w-100 row-cols-1" is="dmx-repeat" id="repeat_categories" dmx-bind:repeat="sc_rules.data.query_categories">
	<div class="col w-100" id="category" dmx-bind:id="{{category}}">
		<h3 class="mb-3">{{category}}</h3>
		<p class="mb-3">{{description}}</p>
		<div class="row row-cols-1 w-100" is="dmx-repeat" id="repeat_rules" dmx-bind:repeat="sc_rules.data.query_rules.where(`category`, rc_id, '==')">
			<div class="col w-100" id="category_number" dmx-bind:id="{{category_number+'-'+rule_number+'-'+rule_title.slugify()}}">
				<div class="row row-cols-2 w-100">
					<div class="col-sm-1 d-print-none"></div>
						<div class="col-sm w-100 col">
							<p><b>{{category_number}}.{{rule_number}}. {{rule_title}}</b></p>
							<p dmx-html="{{rule}}">{{rule}}</p>
							<p class="d-print-none"><a href="#top">Back To Top</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
2

Your issue is quite similar to the one here:

The columns and rows are not responsive on pdf as they are on your page. You can use the solution provided by Patrick - instead of applying a repeat children to the row, apply a regular repeat through the dynamic attributes, this way the row will be repeated so you will get them stacked vertically.

3

I am about to cry. :frowning:

@Teodor, I promise I did search before posting! I used a generic keyword "pdf" and had it sorted by relevance and this did not pop up in the list of the top 100 posts.

To add insult to injury, I actually responded to that topic.

Thank you for taking the time to respond. :slight_smile:

1 Like