Sunday, 10 September 2023

add icon to right most corner of PrimeNg TabView Header

I need to place an icon on the right most corner of a PrimeNG TabView

i looking for something like this

enter image description here

for demonstration purposes i opened the stackblitz in the docs and hardcoded the css but it will not be resposive when screen size changes

    <p-tabView>
        <p-tabPanel header="Header I">
            <p>
                Lorem ipsum
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header II">
            <p>
                Sed ut perspiciatis
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header III">
            <p>
                At vero eos et
            </p>
        </p-tabPanel>
        <i class="pi pi-sort-alt icon-position"></i>
    </p-tabView>
.icon-position {
  position: absolute;
  left: 30rem;
  top: 3rem;
}



from add icon to right most corner of PrimeNg TabView Header

No comments:

Post a Comment