Spaltenbreite einer SharePoint-Liste anpassen

Das Look & Feel von SharePoint 2010 hat sich zu SharePoint 2013 deutlich verändert. Insgesamt wirkt die neue Ansicht sehr modern, wird zum Teil allerdings als gewöhnungsbedürftig empfunden. Ein Beispiel hierfür ist die Spaltenbreite einer Standard Liste die automatisch definiert wird.

spalten

Soll nun die Spalte „Titel“ verbreitert werden, ist dies nicht mehr ohne weiteres möglich. In der Vorgängerversion konnten diese und ähnliche Anforderungen auch ohne Kenntnisse in Webdesign mit dem SharePoint Designer 2010 durchgeführt werden.  Seit dem SharePoint Designer 2013 entfällt allerdings die sogennante Design bzw. Split View und es muss  CSS und JavaScript verwendet werden.

In meinem Beispiel werde ich erklären, wie die Spalte „Titel“ schnell und mit wenig Aufwand mittels jQuery verbreitert werden kann. Hierzu muss mittels Entwicklertool des Browsers (z.B. Firebug oder F12 im IE) die zu manipulierende Klasse herausgefunden werden. Im Beispiel wird das Entwicklertool des Internet Explorers verwendet um die benötigten Details zur Spalte ausfindig zu machen.
 
f12tool
 
In der Abbildung sehen wir das als Selector die Klasse „.ms-vh2“ angepasst werden muss, um die Spaltenbreite neu zu definieren. Nachdem die richtige Klasse gefunden ist, kann nun die Spalte mit einer festen Breite versehen werden

<!--Anpassung der Spaltenbreite-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>
 
 <script type="text/javascript">
 // Zugriff über die Klasse ud den Spaltennamen über den Spaltenname
 $(document).ready(function(){
 $("th.ms-vh2:contains('Name')").css("width", "350px")
});
 
 </script>

Sobald das Skript eingebunden wird, erscheint die Spalte „Titel“ mit der im Skript definierten Breite. Natürlich können auch mehrere Spalten manipuliert werden.
 
Spalten_mitSkript

 Fazit

In wenigen Schritten kann das Design einer Liste den eigenen Wünschen angepasst werden. Zwar ist durch den SharePoint 2013 die grafische Anpassung komplexer geworden, dafür aber wesentlich kompatibler mit neuen Technologien wie z.B. HTML5. Zudem wird die Durchführung eins SharePoint Versions Upgrade wesentlich unkomplizierter, als mit den Änderungen in der 2010 er Version des SharePoint Designers war.

 

 

 

Das könnte dich auch interessieren …

4 Antworten

  1. Johne912 sagt:

    An attentiongrabbing dialogue is worth comment. I believe that you must write extra on this subject, it won’t be a taboo topic but typically persons are not enough to speak on such topics. To the next. Cheers addkfcfdkcde

  2. Riva sagt:

    Ich wollte die Breite der Titel-Spalte anpassen. Aber das markieren des Titels, so dass es mir im Entwicklertool (IE und Firefox ) anzeigt hat nicht geklappt.

  3. I want to express my thanks to this writer just for bailing me out of this trouble. As a result of surfing around through the the net and meeting tricks which were not helpful, I thought my life was done. Living minus the approaches to the difficulties you have resolved as a result of your short article is a crucial case, and the ones that could have negatively damaged my entire career if I hadn’t encountered your blog post. Your good ability and kindness in maneuvering all the stuff was crucial. I don’t know what I would have done if I hadn’t come upon such a subject like this. I am able to at this moment look forward to my future. Thanks a lot so much for the expert and sensible guide. I will not hesitate to endorse your web page to anyone who should get recommendations about this issue.

  1. August 22, 2016

    […] reichen von „das geht gar nicht“, über „das geht automatisch“ bis zu dubiosen Anleitungen, um CSS-Attribute über in die Seite eingebettete JavaScript-Webparts […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert