Forum Discussion

chotu27's avatar
chotu27
Post Patron
9 years ago

Decrease Scroll bar width and height in table visual

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);
 
 

 

Need Help

1 Reply

  • v-viig's avatar
    v-viig
    Community Champion
    9 years ago

    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

    [email protected]