Title height not initialises when creating visual

[diaAzul]

There is an abberant behaviour when creating visuals in Power BI.

I've created a visual that draws a rectangle to fill the background of the visual (the same as drawing a rectangle shape - though I can set the fillet radius to a fixed value rather than percentage of the visual width/height). The visual does not take any data as input and has options in the Vizualisation panel to set the properties of the rectangle (fill colour, opacity, border width, fillet radius, etc...).

However,...

When the visual is first created (insert a new visual into a report) the background rectangle is 16px too high in the frame - the reason for this appears to be that, whilst the visual defaults to selecting a Title (enabled option in Visualisations pane), the font-size and height styles are not included witin the DOM. If the Title is disabled, then renabled then the DOM is updated and the visualisation is positioned correctly.

DOM on creation of visual:

<div class="visualTitle preTextWithEllipsis" 
ng-if="viewModel.visualTitleVisible()" 
title="" apply-style="::viewModel.readOnlyState.titleStyle" 
ng-bind="viewModel.visualTitle.text" 
style="visibility: visible;">
</div>

DOM following disabling and re-enabling Title.

<div class="visualTitle preTextWithEllipsis" 
ng-if="viewModel.visualTitleVisible()" 
title="" apply-style="::viewModel.readOnlyState.titleStyle" 
ng-bind="viewModel.visualTitle.text" 
style="visibility: visible; 
font-size: 12px; 
height: 16px;">
</div>

Is it possible to raise an issue with the developers to ensure that font-size and height is set when the visual is created so that the visual is positioned correctly in the frame?

Thanks

[v-viig · Accepted solution]

Hi @diaAzul,

Thank you for the clarification.

@v-chuncz-msft @v-ljerr-msft Since this issue is related to all of visuals including custom visuals.

Can you send this issue to Power BI dev team for further investigation?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[v-chuncz-msft · Accepted solution]

@diaAzul,

You may add suppressDefaultTitle to capabilities.json.

"suppressDefaultTitle": true

[diaAzul]

@v-chuncz-msftthank you.

I've updated capabilities.json as suggested and the visual now displays correctly.

Best regards

DiaAzul.

[v-viig]

The internal iframe has width and height once the visual is added to the report page.

Would it be possbile to rely on these values or use percentage of height and width?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[diaAzul]

Hi @v-viig,

I've looked at external references, the issue is that the top left frame origin for the custom visual is determined by Power BI - i.e if there is a title it is x pixels down within the sandox, if there is no title then top left is the same as the sandbox frame origin. As the Power BI app controls the location of the custom visual within the sandox I have no control over the placement of the visual (though I can obviously get the overall size of the sandbox as you say).

I suspect that what is happening is that the title text is null (or blank), though the title is selected to be shown, when the visual is first created. I believe that what normally happens is that at the point when data is added to the visual, the title text is filled with the field names. However, as my visual is not data driven the title text is not initialised and when the visual is drawn a null (or blank) text string is passed to the function which returns the height offset for the visual within the sandbox; at that point the function probably throws an error as there is a null (or blank) input leading to the correct attributes not being added which would correctly position the visual.

It's not the end of the world, but it is annoying and there is potential need for more error checking/better test script in Power BI to make sure that null strings are initialised and handled correctly when passed to functions [if that is the error].

Thanks

[v-viig]

Size of the iframe can be taken from viewport property of options that Power BI sends to update method.

Are you able to use viewport size?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[diaAzul]

Hi @v-viig,

Thanks for the suggestion; yes, I am aware of how to extract dimensions from the host options passed during update. However, that is not my problem. The following diagram might make the issue clearer.

The grey rectangle is the background created by my custom visual. The screengrab below each step (A, B, C) are the settings in the Visualisation panel:

• Step A is when the visual is first created. The option for Title is default to on. The visual is aligned at the top of the frame for the visualisation. However, the size of the frame is 16 px short (both the reported value in options, and also the visualisation viewport). Even if I add an additional 16 px to the rectangle manually, I cannot draw beyond the extent of the frame that is provided by Power BI and so the visual is 16 px short (and truncated if I add 16 px to the rectangle).
• Step B - Turn off the title. No options reports the full size of the iFrame, and permits drawing of the full size of the rectangle.
• Step C - Turn Title back on. The top left hand origin of the iFrame is lowered 16px and the reported height of the iFrame is reduced by 16px. Rectangle draws and is positioned as it should be.

The point I am trying to raise is that the visual should draw as C when it is created, not A; and it should not be necessary to switch of the Title and then switch it back on again to get the visual to draw correctly.

The visual (pbviz file) and link to github source code is at https://diaazul.github.io/

Thanks

[v-viig · Accepted solution]

Hi @diaAzul,

Thank you for the clarification.

@v-chuncz-msft @v-ljerr-msft Since this issue is related to all of visuals including custom visuals.

Can you send this issue to Power BI dev team for further investigation?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com