Decrease Scroll bar width and height in table visual

[chotu27]

Hi All,

I have developed my own  Custom Table visual but i am unable to decrease the width of scroll bar same as power bi table visual.

MY less file : 

.scrollTable

{

display: table;

border-collapse: collapse;

}

.heading

{

display: table-header-group;

}

.divTableBody

{

display: table-row-group;

}

.row::before {

display: none;

}

.row:nth-child(even) {

background: lightgray;

}

.row

{

display: table-row;

//border-bottom: 2px solid black;

}

.head

{

display: table-cell;

padding: 7px 5px;

border-bottom: 2px solid pink;

}

.cell

{

display: table-cell;

padding: 1px 5px;

}

visual.ts file :

constructor(options: VisualConstructorOptions) {

options.element.style.overflow = 'auto';

let target: d3.Selection<HTMLElement> = this.target = d3.select(options.element)

let table: d3.Selection<HTMLElement> = this.table =this.target.append("div").classed("scrollTable",true);

this.thead = this.table.append("div").classed("heading",true).append("div").classed("row",true);

this.tbody = this.table.append("div").classed("divTableBody",true).append("div").classed("row",true);

[v-viig]

Power BI native table visual implements its own scrollbar as a div element.

However, your custom visual uses browser's scrollbar. Borwsers doesn't allow us to control size of the scrolbar.

I suppose that there're these soolutions that you might try:

1. Implement your own scrollbar control that supports customizing
2. Take a look at this topic

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com