Recently I was experimenting with solutions that would enable users to resize the width of the columns of a SharePoint view. As you might know, SharePoint calculates the width of columns automatically, and the result is not always optimal. Although it’s relative easy to set the width using SharePoint Designer I was looking for a method that one can use through the web UI, without any external applications.
One of the methods I’ve tried out was to attach a keyboard event handler to the div element of the field header caption. I chose the div, and not the parent th element, because other event handlers were already registered for th, and I didn’t want to interfere with them. When the field caption has the focus (see image below), and the user presses Shift + Left arrow keys, the width of the column is decreased. When the user presses Shift + Right arrow keys, the width of the column is increased.
I used jQuery and the following script (injected through the Content Editor Web Part into the view page) to achieve the goal:
- <script src="/_layouts/adesso/jQuery/jquery-1.8.3.min.js"></script>
- <script language="ecmascript" type="text/ecmascript">
- $(document).ready(startScript);
- function startScript() {
- $('div.ms-vh-div').keydown(function (e) {
- if (e.keyCode != 16) {
- var widthChange = 20;
- var th = $(e.srcElement).closest('th');
- var widthTh = $(th).width();
- if (e.keyCode == 37) {
- $(th).width(widthTh – widthChange);
- }
- else if (e.keyCode == 39) {
- $(th).width(widthTh + widthChange);
- }
- }
- });
- }
- </script>
The result was quite promising, however it has a definitive shortage as well: the settings are not persisted, so the user has to repeat the resizing each time. Theoretically we could store the customized widths in cookies or in SharePoint lists (per user), and reapply the settings on each page load.
