Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table: Not responsive within Sidebar Layout from PrimeBlocks #15735

Closed
kaposoniro opened this issue May 29, 2024 · 3 comments
Closed

Table: Not responsive within Sidebar Layout from PrimeBlocks #15735

kaposoniro opened this issue May 29, 2024 · 3 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@kaposoniro
Copy link

kaposoniro commented May 29, 2024

Describe the bug

The responsive feature of tables seems to be broken when they are located within the main content of the Sidebar Layout taken from PrimeBlocks. It only seems to be the case when placed within a flex container.

Environment

Chrome, StackBlitz

Reproducer

https://stackblitz.com/edit/yub5cx-uqtdin

Angular version

17.3.7

PrimeNG version

17.17.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.12.2

Browser(s)

No response

Steps to reproduce the behavior

  1. Open StackBlitz
  2. Open Preview in new tab
  3. Shrink the browser until the table extends beyond the page size

brave_aWq0BHdvOd

Expected behavior

The table should not extend beyond the page size and display the horizontal scroll bar instead.

@kaposoniro kaposoniro added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 29, 2024
@kaposoniro
Copy link
Author

Expected behavior should be like this:

brave_t548kmay8M

@Joebeurg
Copy link

Joebeurg commented Jun 1, 2024

Having the same issue, even after updating to 17.18 version which supports Angular V18 peer dependencies.
The other option to avoid having a scrollbar on the BODY element, is using responsiveLayout="stack" which changes the table layout on smaller screens.

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

3 participants