SVG image position

[Solle]

Hi All, 

I have an issue related to my SVG imported icon - I have the below code and I am showing the SVG by using the HTML viewer add-in, in PowerBI. 

SVG = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='20px' y='20px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' width='40' height='40'>
<g>
	<path d='M480,224H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h448c17.673,0,32-14.327,32-32S497.673,224,480,224z'/>
	<path d='M32,138.667h448c17.673,0,32-14.327,32-32s-14.327-32-32-32H32c-17.673,0-32,14.327-32,32S14.327,138.667,32,138.667z'/>
	<path d='M480,373.333H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h448c17.673,0,32-14.327,32-32S497.673,373.333,480,373.333z'/>
</g>


</svg>"

The issue is that the SVG contains some blank spaces below the actual image, meaning that when i want to downsize the image, a scrollable bar shows up (see images below). 

Does anyone know how to solve this?

Best Regards, 
Solle

[dm-p · Accepted solution]

Hi @Solle,

The container used to host any custom visual has a small amount of padding that we don't have access to, as it sits above the main body of the visual in the DOM.

If it's he HTML Content visual you're using, it applies a generic scroller over the content, which is pushing the height over in this case. It may be easier to just keep the container size a little bigger, but you can style out the scrollbar handle in this case using the measure-based stylesheet property and assigning via conditional formatting, but it still may scroll if the user clicks on the visual and uses their mouse wheel. 

Note that the property is broken in the new-style formatting pane and you will need to revert to the old version to access. This is an issue for all custom visuals utilising conditional formatting in this manner and Microsoft should be deploying a fix in the next major version of Power BI Desktop.

The measure you can create for the CSS is as follows:

CSS = ".os-scrollbar {
    visibility: hidden;
}"

Assign this via the property and the scrollbar handle will no longer display, e.g.:

Regards,

Daniel

[Anonymous]

Hi @Solle ,

Base on my research, there is no proper setting to disable the scroll bar. You can contact custom visual support team to get professional help, change the settings of HTMLViewer in the backend similar as in the following codes. Or you can raise a new idea and add your comments there to make this feature coming sooner.

Power BI Custom Visuals' Community

make custom visuals scrollable

  constructor(options: VisualConstructorOptions) {
			options.element.style.overflow = 'auto';

Best Regards