1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

PrimeNG tabPanel chart not shown in full width

Discussão em 'Angular' iniciado por Anna Klein, Setembro 14, 2024.

  1. Anna Klein

    Anna Klein Guest

    I have the following issue with this code

    <p-tabPanel header="Monitoring">
    <p class="line-height-3 text-600 p-0 mx-0 mt-0 mb-4">Mattis aliquam faucibus purus in massa tempor nec feugiat
    nisl. Justo donec enim diam vulputate ut pharetra. Tempus egestas sed sed risus.
    Feugiat sed lectus vestibulum mattis. Tristique nulla aliquet enim tortor at auctor urna nunc. Habitant morbi
    tristique senectus et. Facilisi nullam vehicula ipsum.</p>

    <div class="grid">
    <div class="col-12 md:col-6">
    <span class="text-900 block font-bold mb-3 font-bold">Diagram 1</span>
    <div class="card">
    <h5>Linear Chart</h5>
    <p-chart [data]="lineData" [options]="lineOptions" type="line"></p-chart>
    </div>
    </div>
    <div class="col-12 md:col-6">
    <span class="text-900 block font-bold mb-3">Diagram 1</span>
    <div class="card">
    <h5>Linear Chart</h5>
    <p-chart [data]="lineData" [options]="lineOptions" type="line"></p-chart>
    </div>
    </div>
    </div>
    <div class="grid">
    <div class="col-12 md:col-6">
    <span class="text-900 block font-bold mb-3 font-bold">Diagram 1</span>
    <div class="card">
    <h5>Linear Chart</h5>
    <p-chart [data]="lineData" [options]="lineOptions" type="line"></p-chart>
    </div>
    </div>
    <div class="col-12 md:col-6">
    <span class="text-900 block font-bold mb-3">Diagram 1</span>
    <div class="card">
    <h5>Linear Chart</h5>
    <p-chart [data]="lineData" [options]="lineOptions" type="line"></p-chart>
    </div>
    </div>
    </div>
    </p-tabPanel>


    Whenever I remove

    <p class="line-height-3 text-600 p-0 mx-0 mt-0 mb-4">Mattis aliquam faucibus purus in massa tempor nec feugiat
    nisl. Justo donec enim diam vulputate ut pharetra. Tempus egestas sed sed risus.
    Feugiat sed lectus vestibulum mattis. Tristique nulla aliquet enim tortor at auctor urna nunc. Habitant morbi
    tristique senectus et. Facilisi nullam vehicula ipsum.</p>


    the view changes from this

    [​IMG]

    to this

    [​IMG]

    so I bascially lose the whole width.

    I have tried many options like from here https://primeflex.org/maxwidth

    max-width: 100%; and max-width: 100vw;

    but no success. I am a bit lost now after 2 hours. Can someone help out please? Thanks in advance

    Continue reading...

Compartilhe esta Página