Trying to dynamically adjust the style of an unspecified div is causing some trouble. Using Angular and PrimeNG, invisible divs are being generated that I cannot access through inline styles. The objective is to allow a user to input a width as a string (500px, 30rem, etc) and have that width applied to those hidden divs.
Below is my HTML code:
<p-card>
<div class="wrapper">
<div class="percent basin-color-info">
<h2>{{ percentage }}%</h2>
</div>
<div class="info">
<h4>Percentage of time when outstanding risks are received</h4>
</div>
<div class="break"><hr /></div>
<div class="days">
<h5>{{ days }} Days</h5>
</div>
<div class="text"><h4>on average to correct outstanding risks</h4></div>
</div>
</p-card>
Inspecting the code reveals the following structure:
<p-card> (This is in the HTML)
<div class="p-card"> (This is **not** in the HTML)
<div> (This is **not** in the HTML)
<div> (This is **not** in the HTML)
<div class="wrapper"> (This is in the HTML)
...
</div>
</div>
</div>
</div>
</p-card>
Adjusting the width of the first undeclared div with the p-card class in the inspector yields the desired outcome for the card display.
The goal is to find a way to use text interpolation {{ 500px }} or some form of CSS injection to modify the style of these undeclared divs, or explore other possible solutions.
According to the documentation from PrimeNG, the p-card element should accept inline styles as a valid attribute, but for unknown reasons, it does not have any effect.