Question 244874 in Html Question posted in
Some basic documentation can be found here.

Html – 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;
}
Tags:

2

Answers


  1. 0

    wrap the code in <span> and add class in <p-tabView class="example-class">.

    <p-tabView class="example-class">
  <span>
    <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>
  </span>
  <span>
    <i class="pi pi-sort-alt"></i>
  </span>
</p-tabView>

    .example-class {
  display: flex;
  justify-content: space-between;
}
    Login or Signup to reply.
  2. 0

    This should work with you:

    .p-tabview-nav::after {
  content: 'e99e';
  font-family: 'primeicons';
  position: absolute;
  right: 0px;
}

    if it doesn’t work in the SCSS file of the component add :host ::ng-deep before .p-tabview-nav::after

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search