topic Re: make custom visuals scrollable in Developer

make custom visuals scrollable

rkqpbiviz — Tue, 29 Nov 2016 14:43:34 GMT

Hello - I am developing a custom visual in Power BI using typescript and the inbuilt d3 library, it is basically a very specific bullet chart - everything is going pretty well except for one thing - is there a simple way to make the visual scrollable? I've been looking at d3 solutions but they all seem fairly labour intensive so I wanted to know was there an inbuilt object or something similar? Thank you in advance 😄

Re: make custom visuals scrollable

v-chuncz-msft — Thu, 01 Dec 2016 10:15:22 GMT

@rkqpbiviz,

Based on my experience, you can simply use CSS overflow Property.

Re: make custom visuals scrollable

rkqpbiviz — Thu, 01 Dec 2016 16:14:57 GMT

Can you advise me what the object would be called in the css?

Re: make custom visuals scrollable

v-chuncz-msft — Mon, 05 Dec 2016 11:08:58 GMT

@rkqpbiviz,

It's certainly clear.

overflow: scroll;

Re: make custom visuals scrollable

rkqpbiviz — Mon, 05 Dec 2016 11:48:21 GMT

Sorry, perhaps I not been clear -

In the link to the example you posted, it suggested using

div {

overflow:scroll;

}

My question is, in the context of the power BI visual, what is the right term to use instead of div? i.e.

WhatShouldBeWrittenHere{

overflow: scroll;

}

Div does not work and I don't know what the right thing to use in this context

Re: make custom visuals scrollable

v-chuncz-msft — Tue, 06 Dec 2016 10:16:13 GMT

@rkqpbiviz,

It depends on the parent element. You may use JavaScript syntax as shown below.

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

Re: make custom visuals scrollable

rkqpbiviz — Tue, 06 Dec 2016 10:38:50 GMT

Perfect thank you! @v-chuncz-msft

Re: make custom visuals scrollable

kerski — Fri, 10 Feb 2023 15:10:19 GMT

Thank you for this answer.