Cant fit visual in container

[alan9518]

I'm unable to fit a visual embed in 100% width of the parent container
these are the basic settings:

export const VISUAL_SETTINGS: models.ISettings = {
  localeSettings: {
    language: "en-us",
    formatLocale: "en-us",
  },
  layoutType: models.LayoutType.Custom,
  customLayout: {
    pageSize: {
      type: models.PageSizeType.Widescreen,
    },
    displayOption: models.DisplayOption.FitToWidth,
  },

  filterPaneEnabled: false,
  persistentFiltersEnabled: false,
  personalBookmarksEnabled: false,
  navContentPaneEnabled: false,
  bars: {
    actionBar: {
      visible: false,
    },
  },
  panes: {
    bookmarks: {
      visible: false,
    },
    filters: {
      visible: false,
    },
    pageNavigation: {
      visible: false,
    },
    syncSlicers: {
      visible: false,
    },
  },
};

When the IFrame loads it takes the full width of the container plus paddings which is correct, as shown in the image below. but once the visual is rendered it automatically gets centered inside Iframe and gives the impression of having dead space, as noted in the second image, the black area is the visual and is noticable that the grey background color is way more bigger than in the first one

This function allows me to resize the visual when the parent container dimensions change, however this only works after user interaction, it does not work If I try to run on the the first load

const updateEmbedLayoutSettings = async () => {
    const newSettings = { ...VISUAL_SETTINGS };
    newSettings.customLayout = {
      pageSize: {
        type: powerBi.models.PageSizeType.Custom,
        width: parseInt(newReportDimensions.width, 10) * 0.7,
        height: parseInt(newReportDimensions.height, 10),
      } as powerBi.models.ICustomPageSize,
      displayOption: powerBi.models.DisplayOption.FitToWidth,
      pagesLayout: {
        ReportSection: {
          defaultLayout: {
            displayState: {
              mode: powerBi.models.VisualContainerDisplayMode.Hidden,
            },
          },
          visualsLayout: {
            [visualId]: {
              x: 1,
              y: 1,
              z: 1,
              width: parseInt(newReportDimensions.width, 10) - 30,
              height: parseInt(newReportDimensions.height, 10) - 25,
              displayState: {
                mode: powerBi.models.VisualContainerDisplayMode.Visible,
              },
            },
          },
        },
      },
    };
    await report?.updateSettings(newSettings);
  };

Is there a way to properly set the dimensions on initial load or a correct way to handle resizing for visual embeds?

[v-MadhavC]

Thank you for reporting this issue. We will reproduce it in our environment and will update you on our findings within the next few weeks.