I can't make them responsive p-tabPane

26 views Asked by At

I'm trying to make this code snippet responsive, but it's not working, the p-tabPanel overflows my screen. Check the official documentation and try to replicate it, but it still doesn't work. I am working with Angular 16 and primeng 16.9.1.

                <p-tabView [scrollable]="true">
                    <p-tabPanel header="Antecedentes Laborales">
                        <app-funcionario-ficha-page-contrato-antecedentes [RecursoFuncionario]="RecursoFuncionario">

                        </app-funcionario-ficha-page-contrato-antecedentes>
                    </p-tabPanel>

                    <p-tabPanel header="Antecedentes Previsionales">
                        <app-funcionario-ficha-page-antecedentes-previsionales  [RecursoFuncionario]="RecursoFuncionario">

                        </app-funcionario-ficha-page-antecedentes-previsionales>
                    </p-tabPanel>

                    <p-tabPanel header="Antecedentes Acádemicos">
                        <app-funcionario-ficha-page-antecedentes-academicos [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-antecedentes-academicos>
                    </p-tabPanel>

                    <p-tabPanel header="Cargas Familiares">
                        <app-funcionario-ficha-page-cargas-familiares [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-cargas-familiares>    
                    </p-tabPanel>

                    <p-tabPanel header="Permisos Administrativos">
                        <app-funcionario-ficha-page-permiso-administrativo [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-permiso-administrativo>
                    </p-tabPanel>

                    <p-tabPanel header="Feriados Legales">
                        <app-funcionario-ficha-page-feriado-legal [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-feriado-legal>
                    </p-tabPanel>

                    <p-tabPanel header="Otros Permisos Con Goce">
                        <app-funcionario-ficha-page-otros-permisos-con-goce [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-otros-permisos-con-goce>
                    </p-tabPanel>
                    
                    <p-tabPanel header="Historial Laboral">
                        <app-funcionario-ficha-page-historial-laboral [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-historial-laboral>
                    </p-tabPanel>

                    <p-tabPanel header="Calificación">
                        <app-funcionario-ficha-page-calificacion [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-calificacion>
                    </p-tabPanel>

                    <p-tabPanel header="Accidente Laboral">
                        <app-funcionario-ficha-page-accidente-laboral [RecursoFuncionario]="RecursoFuncionario">
                        </app-funcionario-ficha-page-accidente-laboral>
                    </p-tabPanel>

                </p-tabView>
0

There are 0 answers