Lange veldnamen in een formulier afbreken

Het gebeurt wel eens dat je een lijst hebt met velden (of kolommen zo je wil), met uitzonderlijk lange namen. Een gewone veldnaam kan tot 255 karakters bedragen in Sharepoint! Dan heb je een vervelende situatie wanneer je het invulformulier (NewForm.aspx) of het wijzigformulier (EditForm.aspx) wil gebruiken om gegevens in te voeren of te wijzigen. De lange veldnamen worden niet afgebroken, zodat je constant van links naar rechts moet scrollen. Zie afbeelding 1.

Afbeelding 1: je moet van links naar rechts scrollen om in te vullen en om de knoppen te zien

Daar is een vrij eenvoudige oplossing voor.
Als we de pagina openen met Firefox en we hebben de add-on Firebug geïnstalleerd, dan kan je vrij snel zien waar de veldnamen zich bevinden. (zie afbeelding 2 en 3)

afbeelding 2

Afbeelding 2: zoek de tag met de tekst

afbeelding 3

Afbeelding 3: de tekst bevindt zich in de <nobr> tag

Onze eerste veldnaam (“Eerste veld van een lijst met een zeer lange naam omdat ik niet weet hoe ik de veldnaam moet inkorten”) bevindt zich in de niet zo gekende tag <nobr></nobr>.

Deze tag is overigens niet conform de W3C specificatie. De <nobr> tag zegt eigenlijk niks anders dan “niet afbreken” ook als de tekst breder is dan het scherm.

Als we nu met CSS een equivalente oplossing zouden vinden, dan kunnen we verder. En die is er als volgt:

Als we bovendien de breedte van de tekst willen vast leggen, dan kunnen we er een width attribuut aan toevoegen:

Hoe ga je tewerk?

Open het formulier om een nieuw item toe te voegen (NewForm.aspx)
Typ in het adres achteraan &toolpaneview=2 (of ?toolpaneview=2 als er nog geen andere querystrings staan). Je krijgt het formulier nu te zien in de bewerkingsmodus
Voeg een nieuw webonderdeel toe van het type Inhoudseditor (CEWP of Content Editor Web Part)
Voeg via de broneditor deze tekst toe (pas eventueel de width aan naar uw eigen voorkeur):
<style type="text/css">
nobr {white-space: normal; width:300px;}
</style>
Bewaar en verlaat de bewerkingsmodus
Ga op dezelfde manier tewerk voor het wijzigformulier (EditForm.aspx). Voer eerst een item in en open het dan in het bewerkingsformulier.

Dit is het resultaat:

afbeelding 4

Afbeelding 4: scrollen is niet meer nodig, het formulier ziet er veel beter uit

Laatste aanpassing op Friday, December 8, 2017 om 09:14u