Using p-steps component from PrimeNG in small resolutions

user_14935387 0
Viewed 802

I am trying to shrink the p-steps component from PrimeNG in order to prevent overflow in small screen resolutions. This is my current code:

    <div class="d-flex card mb-4">
       <p-steps [model]="items" [(activeIndex)]="currentWizardCard" [readonly]="false"></p-steps>
    </div>

This looks fine in a large screen: Link to image

But when reducing the screen resolution the steps overflow: Link to image

I am wondering if there is a way to wrap the steps or show them in such a way that does not cause the overflow.

primeng angular html
1 Answers

p-steps component does not work well in small screen resolutions if you are using more than 4 steps. For my project I used a vertical stepper from Angular Material Component enter image description here

user_149353870
Related