Monatsrückblick Januar/Februar 2026 ist online!

[diwoma]

Hi,
kann man die Höhe eines List-Eintrages, bzw. den Zeilen-Abstand beeinflussen?

Für mich könnte es enger sein.

[Codierknecht]

@diwoma
Mit CSS kann man so ziemlich alles beeinflussen.
Du müsstest halt im Browser ermitteln, mit welchen Selektoren die Elemente angesprochen werden können.
z.B. Chrome: Rechtsklick auf dem Element => Untersuchen

[diwoma]

@codierknecht

Du müsstest halt im Browser ermitteln, mit welchen Selektoren die Elemente angesprochen werden können.
z.B. Chrome: Rechtsklick auf dem Element => Untersuchen

Das habe ich auch gemacht, bin aber auf keinen "grünen Zweig" gestoßen.
Mann sollte meinen, dass die 'div'-Höhe irgendwo abgeleitet wäre, aber ich habe nichts gefunden, das ich beiflussen hätte können.
Erst dann habe ich gefragt.

[Codierknecht]

@diwoma
Poste doch hier mal den entsprechenden Bereich aus dem HTML (in Code-Tags).
Ich weiß noch nicht genau, welches Widget Du hier verwendest.

[diwoma]

@codierknecht said in MaterialDesign - List -> Zeilenhöhe beeinflussen:

Ich weiß noch nicht genau, welches Widget Du hier verwendest.

Es ist das folgende Widget:

Leider finde ich es nicht im HTML-Code, ich kann es nur als Picture einfügen:

Ich denke, es ist in diesem flex-box-Model definiert, aber mit diesem Konzept bin ich nicht vertraut und ich weiss nicht, wie und wo das definiert ist.

[Codierknecht]

@diwoma
Ich habe diese Widgets nicht installiert, daher kann ich da nix probieren.

Wenn Du mit "Untersuchen" an die Elemente kommst, kannst Du (zuminderst mit Chrome und ich glaube auch im FF) ein bisschen mit dem CSS "rumspielen".

Mit der rechten Maustaste auf dem Element kannst Du den HTML-Quellcode kopieren um den hier (in Code-Tags!) einfügen zu können. Macht es allen anderen einfacher, damit zu arbeiten.

Ich denke, Du solltest mal in dieser Richtung probieren:

ul.materialdesign-list-container div.mdc-list-item {
  height: 16px;
  max-height: 16px;
}

Wie gesagt: Ich habe die nicht installiert - ist also nur ein Schuss aus der Hüfte.
Kann auch sein, dass für das <ul> Element eine line-height definiert werden muss. Da muss man (zumindest ich) immer ein bisschen rumprobieren.

[diwoma]

@codierknecht said in MaterialDesign - List -> Zeilenhöhe beeinflussen:
Hi

Mit der rechten Maustaste auf dem Element kannst Du den HTML-Quellcode kopieren um den hier (in Code-Tags!) einfügen zu können. Macht es allen anderen einfacher, damit zu arbeiten.

Danke für den Tip. Ich wollte immer mit selektieren mehrer Zeilen kopieren. Mit "Select und Kontextmenü" war mit unbekannt. Natürlich ist es einfacher, wenn man den Text im CodeTags sieht.

Ich bin dabei, mit dem CSS herumzuspielen.
Mal sehen, ob ich was finde.

Danke für die Hilfe.

[diwoma]

@codierknecht said in MaterialDesign - List -> Zeilenhöhe beeinflussen:

Ich denke, Du solltest mal in dieser Richtung probieren:

Es war im mdc-list-item, dort war für min-height 40px eingetragen.
Mit

.materialdesign-widget .mdc-list-item {
    min-height: 30px !important;
}

schaut es schon besser aus.
Danke.