SharePointCommunity
Die deutschsprachige Community für SharePoint, Microsoft 365, Teams, Yammer und mit Azure

Sponsored by

Willkommen im Forum Archiv.
Einträge sind hier nicht mehr möglich, aber der Bestand von 12 Jahren SharePoint-Wissen ist hier recherchierbar.




Problem mit Begrenzung der Zeichenanzahl per CSS im Display Template vom CSWP

Geprüfte Antwort Dieser Beitrag hat 2 Antworten

Ohne Rang
91 Beiträge
Myrcella erstellt 1 Dez. 2014 15:36
SchlechtSchlechtIn OrdnungIn OrdnungDurchschnittDurchschnittGutGutSehr gutSehr gut

Hallo Community,

ich bin mal wieder auf ein tolles "Feature" von SharePoint gestoßen, das mir schon seit Tagen die Nerven raubt.

Ich verwende Cross-Site Publishing und nutze dazu CSWPs. In einem CSWP habe ich das Item Display Template "Video" ausgewählt (obwohl es keine Videos sind - geht aber trotzdem). Dieses Template zeigt ein kleines Bild und darunter den Titel des Elements.

Mein Problem: Es werden nur die ersten 30 Zeichen des Titels angezeigt. Unsere Dokumente haben aber sehr lange Titel von oft über 120 Zeichen, und da bringen die ersten 30 Zeichen selten etwas, weil viele Dokumente einen ähnlichen Anfang haben.

Nun habe ich tagelang immer wieder den Code studiert, mit F12 und dem Firebug die ganze Seite abgesucht und alles Mögliche im Skript Editor getestet, aber ich bekomme diese 30-Zeichen-Grenze nicht weg. Das entsprechende Display Template habe ich unter _catalogs/masterpage/Display Template/Search/Item_Video_CompactHorizontal.html gefunden. Dort habe ich dann auch die Quelle des Übels entdeckt:

var line1 = $getItemValue(ctx, "Line 1");
if (!line1.isNull)
{
    var truncatedFormat = function(line1)
    {
        return $htmlEncode(Srch.U.truncateEnd(line1.value, 30));
    };
    line1.overrideValueRenderer(truncatedFormat);
}

Wenn ich diesen Wert allerdings erhöhe, verschwinden zwar die drei Punkte, die den Rest des Titels symbolisieren sollen, aber mir wird trotzdem nicht der gesamte Titel angezeigt. Da sich die Zeichenanzahl trotzdem ändert, nehme ich an, dass das Feld für den Titel zu klein ist und der erweiterte Text ab dem Zeilenumbruch verschwindet.

(Kurze Erklärung zu der veränderten Zeichenzahl: Ich kann sie kürzen z.B. auf 20, ich kann sie auch bis auf 32 Zeichen vergrößern, aber ab 33 Zeichen zeigt er nur z.B. 27 Zeichen an, eben bis zum Ende des letzten vollständig angezeigten Wortes.)

Also habe ich versucht, das Feld für den Titel zu vergrößern, das habe ich aber nicht hinbekommen. In der Datei habe ich nichts dazu gefunden, und im Firebug kann ich zwar eine größere Höhe angeben, aber das entsprechende Feld reagiert nicht und sobald ich den Firebug schließe und ihn dann wieder öffne, ist meine neu angegebene Höhe wieder verschwunden.

Hilfe?!!

Dieses Problem bringt mich echt zum Verzweifeln, es wäre super, wenn mir da jemand unter die Arme greifen könnte!

Viele Grüße,

Myrcella

Alle Antworten

Ohne Rang
91 Beiträge
Myrcella Als Antwort am 2 Dez. 2014 08:31
SchlechtSchlechtIn OrdnungIn OrdnungDurchschnittDurchschnittGutGutSehr gutSehr gut

Guten Morgen,

da mich diese Problematik nicht loslässt, habe ich heute noch einmal geforscht. Scheinbar bin ich nicht die einzige, die auf ein Problem dieser Art gestoßen ist, wie dieser Artikel beweist: http://onlinecoder.blogspot.de/2014/01/override-value-renderer-in-display.html Leider bringt mich die dort angesprochene Lösung nicht weiter, da die Schwierigkeit wie oben beschrieben nicht mehr ausschließlich in der Begrenzung der Zeichenanzahl liegt, sondern vor allem in der Größe des Feldes, in dem die Zeichen angezeigt werden.

Weitere Tests haben mich heute zu der Erkenntnis geführt, dass die Höhe des Feldes immer automatisch an die Höhe von zwei Zeilen angepasst wird. Somit hilft es nur unwesentlich, die Schriftgröße zu verringern, da dadurch zwar mehr Zeichen in einer Zeile angezeigt werden (die Breite von 120px wird konstant beibehalten), aber weiterhin nur zwei Zeilen übereinander.

Weiterhin habe ich probiert, die Höhe direkt im Template zu beeinflussen. Der Code-Ausschnitt dazu ist folgender:

            <div class="ms-srch-video-intent-data" style="height: 50px">
                <h3 style="height: 40px">
                    <a clicktype="Result" href="_#= linkUrl =#_" style="display: block; height: 36px; width: auto" title="_#= $htmlEncode(line1.value) =#_" class="ms-srch-video-intent ms-srch-video-results ms-srch-item-link ms-noWrap" id="_#= line1Id =#_">
                        _#= line1 =#_
                    </a>

Sämtliche Style-Angaben (grün markiert) habe ich ergänzt. Im <div> und im <h3> wurden meine Änderungen auch ausgeführt, nur im <a> weigert er sich weiterhin, auf irgendwelche Änderungen zu reagieren, obwohl ich diesem Artikel [http://stackoverflow.com/questions/5990223/how-to-set-alink-height-width-with-css] gefolgt bin. Weder "display: block" noch "display: inline-block" haben Wirkung gezeigt, obwohl sie im Firebug angezeigt werden. Dabei hat es keinen Unterschied gemacht, ob ich sie direkt im Template oder auf der Seite im Skript-Editor hinzugefügt habe.

Hat bitte jemand einen Tipp für mich, was ich noch ausprobieren könnte?

Beste Grüße,

Myrcella

Ohne Rang
91 Beiträge
Myrcella Als Antwort am 2 Dez. 2014 11:18
SchlechtSchlechtIn OrdnungIn OrdnungDurchschnittDurchschnittGutGutSehr gutSehr gut

Got it:

a.ms-srch-video-results, .ms-srch-item #Summary span

    {max-height: 2.7em;}

Standardmäßig ist die maximale Höhe begrenzt. Hab das mal auf 7.0em gesetzt und jetzt werden brav alle Zeilen angezeigt. Dadurch konnte ich auch die Schriftgröße wieder erhöhen. Ich hoffe, ich habe mich damit nicht nur um viele Nerven gebracht, sondern konnte eine Lösung finden, die eventuell in Zukunft irgendwem helfen wird. :)

CC BY-NC-ND - Michael Greth
Powered by Evocom Productivity