Widen dropdown lists in Power BI using JavaScript
Some dropdowns are too narrow
Ever tried use a checkbox dropdown in Power BI, and it's just too narrow for you to see the full text of what's inside? I'm talking about things like this:
Well, you can actually use JavaScript to pry those dropdowns wider apart to be a bit easier to read. The code is below - throw that into your browser console.
document.querySelectorAll('.slicer-dropdown-popup').forEach((e) => {
e.style.width = '300px';
});
The result is like this.
Convenient isn't it? But how do you use a snippet of JavaScript like that?
Bookmarklets
I've recently rediscovered this technique of executing JavaScript in the browser using bookmarklets. A bookmarklet is a bookmark (in the bookmarks toolbar, say, for convenience) that, instead of a https:// address in the URL, has some JavaScript. What you do is create a bookmark in your browser, and replace the URL with the following:
javascript: document.querySelectorAll('.slicer-dropdown-popup').forEach((e) => {
e.style.width = '300px';
});
Click the bookmark to execute the code.
And there you have it!