Hi everyone, We’ve been experiencing issues with d...
# gooddata-cloud
s
Hi everyone, We’ve been experiencing issues with dashboard responsiveness, especially with tables and their width. For example, a table may fit properly on a 15" screen but not on a 13" screen. Sometimes it displays correctly in Edit mode but not in View mode, and occasionally it only works after refreshing the page. I thought the new “Header Wrap Column” functionality (available in the Analyze settings) was intended to prevent this issue by automatically wrapping column header text when the screen size decreases, but it doesn’t seem to work as expected. Is there a way to ensure that table widths automatically adapt to the screen size and avoid displaying a horizontal scrollbar? Thanks in advance.
k
The knowledge sources only partially cover your scenario, and they do not mention the new “Header Wrap Column” setting in Analyze, so I cannot confirm its exact behavior or known issues. Below is what is documented today for making tables adapt better to varying screen sizes. ### 1. Use column auto‑sizing and grow‑to‑fit (Pivot Table – legacy) For Pivot Table (legacy) in GoodData.UI, you can let visible columns expand to fill the container and reduce the need for a horizontal scrollbar:
Copy code
jsx const config = {     columnSizing: {         defaultWidth: "autoresizeAll",         growToFit: true,     }, };
-
defaultWidth: "autoresizeAll"
– columns resize to fit their content. -
growToFit: true
– visible columns stretch to occupy the full table width. [[Pivot auto‑resizing](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/pivot_table/#auto-resizing); [Grow to fit](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/pivot_table/#resizing-visible-columns-to-fill-up-the-container)] This reduces horizontal scrolling, but it does not guarantee that scrollbars will never appear (e.g., many narrow columns or very small containers). ### 2. Enable automatic reset of column sizing on resize There is a known issue where tables with
growToFit
may not expand correctly after container width changes (e.g., tab switch, layout change) until a refresh. To address this, there is a setting/prop to auto‑reset column sizing when the container or column structure changes: - Global setting:
Copy code
ts   enablePivotTableAutoSizeReset?: boolean;
“Enable automatic reset of column sizing in pivot table when container width changes or column structure changes. This fixes issues where tables with growToFit don't expand to full width after tab switching.” [[Settings flag](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-model.isettings.enablepivottableautosizereset.html#isettingsenablepivottableautosizereset-property)] - For PivotTableNext (experimental config):
Copy code
ts   enablePivotTableAutoSizeReset?: boolean; // default: true
Same behavior and description. [[PivotTableNext config](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-ui-pivot.pivottablenextexperimentalconfig.enablepivottableautosizereset.html#pivottablenextexperimentalconfigenablepivottableautosizereset-property)] Make sure this is enabled in your environment; it specifically targets cases where tables don’t re‑fit after layout changes, which sounds similar to “works after refresh / different between Edit and View”. ### 3. Dashboard layout constraints Dashboards use a responsive 12‑column grid with breakpoints; widgets can resize and reflow between rows when screen size changes. [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] Key points: - Widgets have minimum widths (most 2 grid columns; Geo charts 6) to keep them readable. [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] - Small pivot tables on dashboards are automatically resized to fill the widget width. [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] Because of these constraints, a table that fits on a 15" screen may wrap or reflow differently on a 13" screen, which can reintroduce a horizontal scrollbar even if the table itself is trying to grow‑to‑fit. ### 4. What is not documented - The docs do not describe the “Header Wrap Column” feature or guarantee that it will prevent horizontal scrollbars. - There is no documented way to force tables to always avoid horizontal scrollbars on all screen sizes; behavior depends on: - widget/container width (dashboard layout, embedding wrapper), - number of columns and their content, - column sizing configuration. ### Practical recommendations Based on the available docs: 1. If you use GoodData.UI for embedding, configure the pivot table with:
Copy code
jsx    const config = {        columnSizing: {            defaultWidth: "autoresizeAll",            growToFit: true,        },    };
and ensure
enablePivotTableAutoSizeReset
is enabled (globally or via PivotTableNext config). [[Auto‑resizing](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/pivot_table/#auto-resizing); [Grow to fit](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/pivot_table/#resizing-visible-columns-to-fill-up-the-container); [Auto‑size reset](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-model.isettings.enablepivottableautosizereset.html#isettingsenablepivottableautosizereset-property)] 2. On dashboards, check widget widths at different breakpoints and avoid making table widgets too narrow; the responsive grid may otherwise force wrapping and cause scrollbars. [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] If you’re already using these settings and still see inconsistent behavior (especially the Edit vs View difference), that likely requires a support investigation, as similar layout/width issues have been escalated before. [[Random width bug](https://gooddataconnect.slack.com/archives/C04S1MSLEAW/p1760951555975889?thread_ts=1760951555.975889&cid=C04S1MSLEAW)]
s
I'm talking a about this tick box: Canvas > Column Headers > Wrap Text
j
Hi Simon, The Wrap Text option mainly improves readability of long column headers and row cells. It isn’t a fully responsive layout engine, so it’s not expected to perfectly adapt table width for every screen size, column combination, or dashboard layout — some of what you’re seeing may therefore be expected behavior. That said, to understand whether this is within current limitations or something we should raise internally, could you please share a screenshot or short video showing: • the table in Edit vs View mode • the issue on different screen sizes (if possible) • browser / is it happening in any browser? Once we have a concrete example, we’ll check it internally to clarify.
s
Hi @Julius Kos Here is one example https://www.loom.com/share/db5855e9ea2747eaaba726f4ae2055b4 The table could fit into my screen width but it does not even if i manually try do it in Edit mode. The horizontal scroll bar is really paintful for us. We expect the table to fit with screen width (unless there are too many colums obviously)
j
Hi Simon, We don't consider this as a bug and I'm afraid that this is simply how this recently introduced feature works. I completely understand it might be not convenient in some situations but the only thing I can currently do for you is to submit a product feedback so our Product Team can review the behavior and consider some improvements. Please let me know if I should do so on your behalf.
s
Hey @Julius Kos thanks for you reply. That said, what would be your recommandation to avoid this from happening ? Is their a way to only make sure the table width adapt to different screen sizes as long as long it is possible ?
Hello @Julius Kos do you have any solution ? I expect from a responsive tool to automaticaly adapt to different screen sizes. Either by wraping header text or by hiding a part of it if necessary. (as long as long as collum value is still clear) Thanks
j
Hi Simon, I just wanted to let you know that we have opened a ticket with our engineers to investigate this further and hopefully find a solution for the scroll bar.
s
Ok thanks, keep me posted