Skip to content

Commit cfeafe9

Browse files
author
Sahil Lagwal (MAQ LLC)
committed
Merged PR 650772: Can't fit to visual bug: Dynamically setting custom layout instead of hardcoding values
## Description When embedding a visual, there is noticeable space on the left and right sides of the container, even after applying fitToWidth in the displayOption of the custom layout. - Applying `fitToWidth` in the initial embed configuration results in extra space on both sides. - When the `fitToWidth` display setting is triggered by a button click using the updateSettings method, the visual adjusts correctly without any extra spacing. ![image.png](https://dev.azure.com/powerbi/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/650772/attachments/image.png) #### PR Summary This pull request addresses a visual bug where the embedded visual does not fit correctly within the container by dynamically setting custom layout values. - `src/visual.ts`: Modified to dynamically set `displayOption`, `pageSize`, and `pagesLayout` from the configuration if available, otherwise use default values. ### Checklist #### TypeScript | Checklist Point | Description | Status (Yes/No/NA) | |-------------------------|------------------------------------------------------------------------------------------------------------------|--------------------| | Imports | Review import statements and ensure that only required modules and components are imported. Unused imports should be removed | Yes | | Coding Standards | Ensure that the code follows consistent indentation, formatting, and naming conventions | Yes | | Type Annotations | Check for proper type annotations for variables, function parameters, and return types to enhance code clarity and catch potential errors | Yes | | Services | Confirm that services are being used appropriately for data retrieval and manipulation | Yes | | Error Handling | Check for proper error handling, including catching and handling exceptions or errors that might occur during component execution. | Yes | | Lifecycle Hooks | Verify that lifecycle hooks are used correctly and efficiently | NA | #### CSS | Checklist Point | Status (Yes/No/NA) | |---------------------------------------------------------------|--------------------| | Is CSS class or id prefixed with a string specific to project? | Yes | | Is use of `!important` avoided? | Yes | | Are CSS classes created logically so that they can be reused? | Yes | | Are unused classes/rules removed? | Yes | | Have you followed proper formatting in your CSS files? ...
1 parent cbb18c1 commit cfeafe9

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

‎src/visual.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,9 @@ export class Visual extends Report {
112112
config.settings.navContentPaneEnabled = false;
113113
config.settings.layoutType = LayoutType.Custom;
114114
config.settings.customLayout = {
115-
displayOption: DisplayOption.FitToPage,
116-
pageSize: pageSize,
117-
pagesLayout: pagesLayout
115+
displayOption: config.settings?.customLayout?.displayOption ?? DisplayOption.FitToPage,
116+
pageSize: config.settings?.customLayout?.pageSize ?? pageSize,
117+
pagesLayout: config.settings?.customLayout?.pagesLayout ?? pagesLayout
118118
};
119119

120120
this.config = config;

0 commit comments

Comments
 (0)