Hi Team, we are using iframe to embed Gooddata Cloud ( Dashboards - Tab) in our platform. If are facing issue - When the screen is zoomed in to 100, the add or "+". button is not displayed. (basically not responsive UI. @Abhijeet Gupta @Vivek Kushwaha

Hi Anjali, when the embedded component has less than ~1170 px of horizontal space, GoodData automatically hides some controls, including the Edit / “+” (new dashboard) button, to fit the layout. This is why you see the button in the full UI, but not when embedded or when the screen/zoom makes the iframe effectively narrower. This is mentioned here: https://www.gooddata.com/docs/cloud/embed-visualizations/iframes/embed-dashboard-via-iframe/ If you allocate less than 1170 px of horizontal space for the embedded component, certain control elements, such as the Edit button, will be hidden.

@kapa.ai How does GoodData implement responsive UI at the dashboard and component level? In particular, how are layout breakpoints, component reflow, and visibility rules handled across different screen sizes, and what safeguards exist to prevent critical action controls?

The knowledge sources only partially cover this topic, so some aspects of your question (especially detailed “visibility rules” and “safeguards to prevent hiding critical controls”) are not explicitly documented. Below is what is clearly described. ### 1. Dashboard‑level responsive layout Dashboards use a 12‑column responsive grid with predefined breakpoints. When the screen crosses a breakpoint, widgets can resize and reflow (e.g., a single row of widgets may become two rows). [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] - Layout is defined per screen size via

IDashboardLayoutSizeByScreenSize

, keyed by screen types

xl | lg | md | sm | xs

. [[ScreenSize](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-model.screensize.html#screensize-type); [Size by screen](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-model.idashboardlayoutsizebyscreensize.html#properties)] - Each dashboard layout item has a

size: IDashboardLayoutSizeByScreenSize

, so you can specify different width/height (in grid units) for different breakpoints. [[Item size](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-model.idashboardlayoutitem.size.html#idashboardlayoutitemsize-property); [Size by screen](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-model.idashboardlayoutsizebyscreensize.html#properties)] Widgets have minimum widths to keep them readable (most 2 grid columns; Geo charts 6). [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] ### 2. Containers and reflow Column containers provide additional responsive behavior inside a dashboard section: [[Column container](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#column-container)] - Default is vertical (column) layout: widgets stack; width is inherited from the container; you can only change widget height. - You can switch to “Wrapped Row” (horizontal with wrapping). In this mode: - Widgets are laid out in rows and can wrap to the next row when space is insufficient. - Width is per widget; height is shared within a row. - Resizing the container resizes all nested widgets (and nested containers) while preserving layout direction. This is the main documented mechanism for “reflow” of multiple widgets across screen sizes. ### 3. Component‑level responsiveness Visual components (charts, tables, InsightView) are responsive and always fill their wrapper element. To control their size, you must set the wrapper’s `height`/`width` explicitly. [[Charts and plots](https://www.gooddata.com/docs/gooddata-ui/latest/learn/visualize_data/charts_and_plots/)]

jsx <div style={{ height: 400, width: 600 }}>     <AreaChart ... /> </div>

#### Compact size for small containers For charts embedded via GoodData.UI, you can enable compact rendering:

jsx <InsightView     insight={/* id */}     config={{ enableCompactSize: true }} />

With `enableCompactSize: true`: - Less important parts (e.g., axis labels) are hidden to keep the chart readable in small containers. - There are documented minimum heights per visualization type (e.g., bar/column/pie: 134px; pivot table: 134px; headline: 34/94px). [[Chart config](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/chart_config/#enable-a-compact-size)] This is the main documented safeguard against unreadable charts in small spaces. #### Legends Legends can be made responsive: -

ILegendConfig.responsive

can be

true

or

"autoPositionWithPopup"

. When enabled, legend items render horizontally on screens smaller than 767px. [[Legend responsive](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-ui-charts.ilegendconfig.responsive.html#ilegendconfigresponsive-property)] - Documentation recommends using a popup legend together with compact size for better UX on small charts. [[Chart config](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/chart_config/#enable-a-compact-size)] ### 4. Pivot table responsiveness Pivot tables (legacy component) support auto‑resizing of columns to fit content or viewport: -

columnSizing: { defaultWidth: "autoresizeAll" }

– resize all columns to content. -

columnSizing: { defaultWidth: "viewport" }

– resize only columns visible in the initial viewport. [[Pivot auto‑resizing](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/pivot_table/#auto-resizing)] This helps tables adapt to dynamic or constrained widths (e.g., exports, small widgets). On dashboards, small pivot tables are automatically resized to fill the widget width. [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout)] ### 5. Safeguards and visibility of critical controls The knowledge sources do not explicitly describe: - A formal “visibility rules” system (e.g., per‑breakpoint show/hide of specific controls). - Specific safeguards that guarantee “critical action controls” (buttons, filters, etc.) are never hidden or pushed off‑screen. What is documented instead are indirect safeguards for usability: - Minimum widget widths and chart minimum heights to keep content legible. [[Dashboard layout](https://www.gooddata.com/docs/cloud/create-dashboards/dashboard-layout/#configure-dashboard-layout); [Chart config](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/chart_config/#enable-a-compact-size)] - Compact size and responsive legends to avoid overcrowding in small containers. [[Chart config](https://www.gooddata.com/docs/gooddata-ui/latest/references/visual_components/chart_config/#enable-a-compact-size); [Legend responsive](https://sdk.gooddata.com/gooddata-ui-apidocs/v11.11.0/docs/sdk-ui-charts.ilegendconfig.responsive.html#ilegendconfigresponsive-property)] - The general rule that visual components always fill their wrapper, so control over visibility is largely in how you size and arrange wrappers and dashboard widgets. [[Charts and plots](https://www.gooddata.com/docs/gooddata-ui/latest/learn/visualize_data/charts_and_plots/)] If you need strict guarantees about critical controls (e.g., action buttons in custom apps), you would need to enforce those in your own layout and CSS around the GoodData components; the provided docs do not describe a built‑in policy layer for that.

Is there a way i can customise resposive UI ?

Hi Abhijeet, the responsive behavior (12‑column grid, breakpoints, control hiding below ~1170px, Flexbox layout) is built into the product. What you can customize: Layout inside dashboards (within GoodData UI) ◦ Resize and rearrange widgets within the 12‑column grid. ◦ Use sections, column widths, and widget sizes to make layouts work better at different widths. [Cloud layout] Appearance and theming ◦ Change colors, fonts, and some visual styles via themes or CSS when embedding. [Customize appearance] Full custom responsive behavior via React SDK ◦ Instead of iframes, you can embed using the GoodData.UI React SDK and build your own responsive container/layout around visual components or the Dashboard component. [*Embed via React SDK*; Customize appearance with React] If you need fine‑grained control over responsiveness, the recommended path is to move from iframe embedding to the React SDK and manage the layout yourself.