I've had a look at this problem and it turns out that the value for the width is set programmatically, somehow, into a style for a div.
When the page is examined using Edge's DevTools, we can see that there is a hidden div
in the mix that displays the associated drop down list for a particular control. This div contains another div
nested in a span
...
01 <div id="ReportViewerControl_ctl04_ctl03_divDropDown"
02 onclick="event.cancelBubble=true;"
03 onactivate="event.cancelBubble=true;"
04 style="border-color: darkgray; border-width: 1px; border-style: solid; overflow: visible; background-color: window; display: inline; position: absolute; z-index: 11; left: 233px; top: 56px;">
05 <span style="margin: 0px; background-color: window;">
06 <div style="overflow: auto; width: 214px; height: 150px;">
07 <span>
...
...
08 <input type="hidden"
09 name="ReportViewerControl$ctl04$ctl03$divDropDown$ctl01$HiddenIndices"
10 id="ReportViewerControl_ctl04_ctl03_divDropDown_ctl01_HiddenIndices" value="36">
11 </span>
12 </div>
13 <div style="height: 16px; width: 100%; margin: 0px; border-top: 1px solid lightgray; background-color: window; direction: ltr;">
14 <img style="float: right; cursor: se-resize;"
15 src="~snip~">
16 </div>
17 </span>
18 </div>
Line 06
is the important one - that contains the problem, which cannot be simply removed using CSS; the value of width: 214px;
needs to be removed from the code.
If we edit this line and take out the width
setting from the style
element, the width of the multi-select box does resize to fit all elements.
The list does appear to be static, however, and generated for each drop down list.
SSRS appears to be based older WebForms technology. It's clear to see how the old controls seem to be influencing the way the code is written to the page. Instead of a lot of clean divs and flexigrids, we're looking at nested tables and iframes. On top of that, the HTML is piped into form
tag on an aspx page in the background (C:\Program Files\Microsoft SQL Server Reporting Services\SSRS\ReportServer\Pages\ReportViewer.aspx
).
This is useful in some respects, as the ReportViewer.aspx
file can be edited and we can add our own JS to handle this problem.
I'm busy trying to modify this at the moment to re-write the value, so I'll keep you posted....