We discovered a page break behaviour for columns when using unordered lists which we do not understand.
The following example has to <ul> in a two column <div>. If you remove the 'page-break-before: avoid;' from the 'salutation' class you can see that both <ul> would fit into the first column. With the 'page-break-before: avoid;' of the 'salutation' class the second <ul> has to be wrapped to the second column so that at least one list item is placed in the second column together with the salutation.
In the example the second <ul> is placed completely in the second column.
If I append additional text (pa ' di cambio nei') to the last list item, so it spans two lines and therefore the <ul> does no longer fit completely into the first column, only the last list item gets placed into the second column.
It seems that if the second <ul> would have place in the first column it is completely placed into the second column and if it does not fit as a whole into the first column only the last list item is placed into the second column.
I do not understand why the wrapping isn't done the same way in both cases?
I can force the behaviour of moving the complete <ul> to the second column for both cases by adding 'page-break-inside: avoid;' to the 'list' class.
Example:
The following example has to <ul> in a two column <div>. If you remove the 'page-break-before: avoid;' from the 'salutation' class you can see that both <ul> would fit into the first column. With the 'page-break-before: avoid;' of the 'salutation' class the second <ul> has to be wrapped to the second column so that at least one list item is placed in the second column together with the salutation.
In the example the second <ul> is placed completely in the second column.
If I append additional text (pa ' di cambio nei') to the last list item, so it spans two lines and therefore the <ul> does no longer fit completely into the first column, only the last list item gets placed into the second column.
It seems that if the second <ul> would have place in the first column it is completely placed into the second column and if it does not fit as a whole into the first column only the last list item is placed into the second column.
I do not understand why the wrapping isn't done the same way in both cases?
I can force the behaviour of moving the complete <ul> to the second column for both cases by adding 'page-break-inside: avoid;' to the 'list' class.
Example:
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
@page {
size: A4;
margin-top: 20mm;
margin-right: 20mm;
margin-bottom: 20mm;
margin-left: 20mm;
padding: 0;
}
.columns {
font-size: 8pt;
color: black;
height: 13em;
border: 1px solid gray;
column-fill: auto;
column-rule: gray solid thin;
column-count:2;
column-gap:5mm;
}
.list {
list-style: square outside none;
margin-left: 5px;
padding-left: 1em;
}
.list-item {
page-break-inside: avoid;
}
.salutation {
padding-top: 1.2em;
page-break-before: avoid;
}
</style>
</head>
<body>
<div class="columns">
<ul class="list">
<li class="list-item">
Vettura obbligazionario a gestione attiva
</li>
<li class="list-item">
Metodologia di valutazione coerente applicata da Inrate (approccio best-in-service)
</li>
<li class="list-item">
Netta distinzione tra analisi sostenibile e analisi finanziaria
</li>
</ul>
<ul class="list">
<li class="list-item">
Analisi finanziaria professionale e gestione attiva da parte di Asset Management
</li>
<li class="list-item">
Gestione attiva della duration e delle valute
</li>
<li class="list-item">
Gli investimenti in valuta estera sono coperti contro il rischio di cambio nei confronti del franco
</li>
<li class="list-item">
Appropriato per investitori con una propensione al rischio
</li>
</ul>
<p class="salutation">Saluto, ...</p>
</div>
</body>
</html>