I think both elements are affected by the same underlying issue: when resized to expand a row or rotate to landscape, the element's width or height property is updated (which is set using px in the minified code) and the text fills the space rather than remaining the same size.
For the p-table, I'm using an expandable content to display details. But when I click to open a second <tr> with details, both expanded details increase their font-size from 16px to 24px. In the html tag, I have the font-size: 16px set and no other code to increase the font-size for these elements. I'm not sure what's happening under the hood, but it's causing major UI problems.
Code: Select all
<ng-template pTemplate="rowexpansion" let-m>
<tr>
<td colspan="8">
{{ m.move.description[0].flavor_text }}
</td>
</tr>
</ng-template>
Code: Select all
<p-card header="Abilities" styleClass="p-card-style">
<p-accordion>
<p-accordionTab *ngFor="let a of selected_character_abilities">
<ng-template pTemplate="header">
<div style="display: flex; flex-direction: column">
<h3 style="padding: 0">
{{ displayFormattedName(a.ability.name) }} {{ a.is_hidden ? '(hidden)' : '' }}
</h3>
<p style="padding-bottom: 0; font-style: italic">
{{ a.ability.description[0].flavor_text }}
</p>
</div>
</ng-template>
<ng-template pTemplate="body">
<p>{{ a.ability.effects[0].effect }}</p>
</ng-template>
</p-accordionTab>
</p-accordion>
</p-card>