Tag: script

Adjust SharePoint list column widths in classic view

columnexpand

This is a popular request that I’ve recently modified, thanks to the recommendation of a colleague, to be responsive to different device or browser sizes. By default, SharePoint lists respond to their viewer’s size but once customized with a fixed pixel width will lose that feature. This solution utilizes percentages so you can create column widths ideal for any screen.

Continue reading “Adjust SharePoint list column widths in classic view”

Remove select/de-select checkmark column, column headers, edit/new options, and border in SharePoint list view web parts

tooltiplinkedtitlesIn a recent post, I discussed hyperlinking URL title text and adding tooltips. I used the above screenshot which also illustrates what we’ll accomplish in this post which is to remove the select/deselect checkmark column, column headers, toolbar edit/new options and chrome border. This leaves us with a simple title and list. Pick and choose what you’d like to remove for your specific needs, and let me know if you run into any issues.

Continue reading “Remove select/de-select checkmark column, column headers, edit/new options, and border in SharePoint list view web parts”

Highlight specific column headers in a SharePoint list

columnheaderhighlight.png

Highlighting specific column headers can be useful in drawing attention to specific information areas to make sure they’re complete or just to aid users in seeing the most important info quickly.

You can insert this script in a Script Editor webpart or save it in a css file in your Site Assets and reference the link in a content editor web part on the list page (much more accessible and easy to edit later).

Simply replace “Column1” with the exact name of your column header. Repeat the script as many times as you wish for each column header you want to highlight. Remember to change the script if you change a column name. And if this yellow isn’t your thing, check out this color wheel to help pick a new color code to use in your script.


<style>

.ms-vh-div[DisplayName="Column1"]

{

background-color:#FFFF66;

}

.ms-vh-div[DisplayName="Column2"]

{

background-color:#FFFF66;

}

</style>