The problematic area is the one inside the red square. The CSS classes being used are as follows:
.overflowHidden{
overflow: hidden;
}
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
.floatAuto{
float: auto;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
.alignCenter {
margin-left:auto;
margin-right:auto;
}
.alignJustify{
text-align: justify;
}
.summaryListStyle{
/*padding-left: 25%;*/
list-style-position: outside;
}
Here is how the markup looks like:
<h6 class = "alignLeft">Price Calculation:</h6>
<ul class = "alignJustify">
<li class="summaryListStyle">
<span class="floatAuto alignLeft">{{ car.basemodel.name }}:</span>
<span class="floatRight">{{ car.basemodel.price }} €</span>
</li>
<li class="summaryListStyle">
<span class="floatAuto alignLeft">{{ car.edition.name }}:</span>
<span class="floatRight">{{ car.edition.price }} €</span>
</li>
<li class="summaryListStyle" *ngFor="let extra of car.edition.extras">
<span class="floatAuto alignLeft">{{ extra.name }} (belongs to edition):</span>
<span class="floatRight">{{ extra.price }} €</span>
</li>
<li class="summaryListStyle" *ngFor="let extra of car.extras">
<span class="floatAuto alignLeft">{{ extra.name }}:</span>
<span class="floatRight">{{ extra.price }} €</span>
</li>
</ul>
<div *ngIf="discount != 0.00">
Prices for optional extras are reduced by {{ discount }}%.
</div>
<div class="summaryTotalPriceStyle exposedVerticallyTop">
Total Price: {{ price }} €
</div>
I experimented with various combinations of the CSS classes mentioned above on the HTML elements, some worked better than others, but none was able to solve the issue completely. Regardless of the zoom level, there was always a problem. I believe this issue is related to the use of the float property, and unfortunately, I couldn't find an alternative way to move the SPAN elements inside the LI elements to the right. The text-align property didn't work either, as it didn't shift the content further to the right.