Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
RyanBentham
Kudo Commander
Kudo Commander

Custom Visual that extends outside of the its container

As we know, the native Power BI drop-down slicer can extend outisde of it's container (see below)

RyanBentham_0-1664979981693.png

Are we able to achieve this same behaviour using a Custom Visual slicer?  With all my efforts so far I'm not able to do this, unless I extend the size of the visual container.  That of course then creats overlap issues with other visuals that I want to avoid

 

Thanks

 

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @RyanBentham,

Custom visuals are hosted as sandboxed iframes within a report, and rich HTML is not permitted to overflow the boundaries of the container, due to the restrictions MS have imposed upon this sandbox.

Core visuals are hosted as div elements within the report, and therefore don't have the same issues that we as third-party developers have in this regard.

With custom visuals, you can only exceed the boundaries of the container by using pure HTML form input elements, and not components or controls that are styled using more complex HTML. These elements have limited styling options, but will do what you want if you can accept this as an outcome.

The only supported way to exceed the boundaries of a visual is to use the dialog box API, which was introduced specifically for this limitation, and may be possible to adapt for your situation, but this may create some significant friction with UX, if you need it to serve as the list of options for a dropdown list. 

The alternative is as you've currently observed, and that's to ensure that your users size the visual to leave enough space for the dropdown list to grow into.

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

Hi @RyanBentham,

Custom visuals are hosted as sandboxed iframes within a report, and rich HTML is not permitted to overflow the boundaries of the container, due to the restrictions MS have imposed upon this sandbox.

Core visuals are hosted as div elements within the report, and therefore don't have the same issues that we as third-party developers have in this regard.

With custom visuals, you can only exceed the boundaries of the container by using pure HTML form input elements, and not components or controls that are styled using more complex HTML. These elements have limited styling options, but will do what you want if you can accept this as an outcome.

The only supported way to exceed the boundaries of a visual is to use the dialog box API, which was introduced specifically for this limitation, and may be possible to adapt for your situation, but this may create some significant friction with UX, if you need it to serve as the list of options for a dropdown list. 

The alternative is as you've currently observed, and that's to ensure that your users size the visual to leave enough space for the dropdown list to grow into.

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




@dm-p  Thanks Daniel - appreciate the information.  I hope it's something that may be possible in the future!  In the meantime I'll check out the dialog box API

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.