Contao-Camp 2024
Ergebnis 1 bis 28 von 28

Thema: Mate Theme Tabellen werden abgeschnitten

  1. #1
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard Mate Theme Tabellen werden abgeschnitten

    Hallo,

    ich verwende aktuell Contao 4.9. und das Mate Theme.

    Wenn ich in einem Artikel eine Tabelle einbinde, dann wird das auf der Desktop Ansicht soweit auch korrekt angezeigt. Wenn ich nun die Seite über Smartphone aufrufe, dann wird die Tabelle rechts abgeschnitten. Es ist auch nicht möglich weiter nach rechts zu schieben.

    Gibt es eine eleganter Lösung zu den Tabellen?

  2. #2
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Link zur Seite?
    Grüsse
    Bernhard


  3. #3
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    Link zur Seite?
    Gibt es noch nicht, ist noch nicht live. Momentan noch lokal.

  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    OK, dann wird's wohl schwer dir zu helfen denn ohne den Inhalt zu kennen kann jetzt wohl nur mal geraten werden.

    - zu breiter Inhalt in einer Tabelle
    - fixe Breiten in der Tabelle
    - Leerzeichen in der Tabelle
    - "falsche" breakpoints in den media queries
    - ...
    Grüsse
    Bernhard


  5. #5
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Ok, klar macht sinn.

    In meinem Fall handelt es sich um eine "einfache" Tabelle, die über Contao Tabellenfunktion eingebunden wird.

    3 Spalten, 6 Zeilen ohne Überschriften.

    In jeder Zelle ist ein Foto mit einem Namen darunter, mehr eig. nicht.

    Im Smartphone werden dann 2 Zellen und ca. 1/3 der dritte angezeigt. Wenn ich im editor auf source Code umschalte, dann habe ich den folgenden Code:
    HTML-Code:
    <table style="width: 0%; border-collapse: collapse; border-style: hidden; height: 210px;" border="0">
    <tbody>
    <tr style="height: 78px;">
    <td style="width: 33.3333%; text-align: center; height: 78px;">
    <figure><img src="files/image%20%2811%29.jpg" alt="" width="250" /></figure>
    <div id="cc-m-13325507389" class="j-module n j-text ">
    <p><strong>Thomas </strong></p>
    </div>
    </td>
    <td style="width: 33.3333%; text-align: center; height: 78px;">
    <figure><img src="files/image%20%2815%29.jpg" alt="" width="250" /></figure>
    <div id="cc-m-13325507589" class="j-module n j-text ">
    <p><strong>Dominik </strong></p>
    </div>
    </td>
    <td style="width: 33.3333%; text-align: center; height: 78px;">
    <div id="cc-m-13325507689" class="j-module n j-imageSubtitle ">
    <figure><img src="files/image%20%2819%29.jpg" alt="" width="250" /></figure>
    </div>
    <div id="cc-m-13325507789" class="j-module n j-text ">
    <p><strong>Christopher</strong></p>
    </div>
    </td>
    </tr>
    <tr style="height: 78px;">
    <td style="width: 33.3333%; text-align: center; height: 78px;">
    <div id="cc-m-13325508789" class="j-module n j-imageSubtitle ">
    <figure><img src="files/image%20%2813%29.jpg" alt="" width="250" /></figure>
    </div>
    <div id="cc-m-13325508889" class="j-module n j-text ">
    <p><strong>Pascal </strong></p>
    </div>
    </td>
    <td style="width: 33.3333%; text-align: center; height: 78px;">
    <div id="cc-m-13325509489" class="j-module n j-imageSubtitle ">
    <figure><img src="files/image%20%2812%29.jpg" alt="" width="250" /></figure>
    <div class="cc-clear"><strong style="font-size: 0.875rem;">Daniel</strong></div>
    </div>
    </td>
    <td style="width: 33.3333%; text-align: center; height: 78px;">
    <div id="cc-m-13435914189" class="j-module n j-imageSubtitle ">
    <figure><img src="files/image%20%2816%29.jpg" alt="" width="250" /></figure>
    </div>
    <div id="cc-m-13325509989" class="j-module n j-text ">
    <p>Lisa</p>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    Daher meine Frage, ob es eine alternative zu den Tabellen gibt und dennoch gleichmäßig ausgerichtet. So dass man die Tabelle ganz entfernen kann.
    Geändert von Jinroo (14.03.2020 um 17:13 Uhr)

  6. #6
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    ... trotz HTML ... ohne link ist's nur ein Ratespiel ...
    Mag sein, dass sich deine Bilder jeweils die 250px Breite wünschen und sich nicht an die verfügbare Breite anpassen » damit hast du schon mal 750px Breite ...
    Kann aber natürlich auch an etwas anderem liegen » link zum Projekt

    Alternative zur Tabelle: JA - verwende Spalten/columns
    Ohne das Mate-theme zu kennen, würde ich sagen, dass auch dort im Layout ein 3-Spalten-Set möglich ist
    Grüsse
    Bernhard


  7. #7
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    link zum Projekt
    Wie gesagt, dass geht aktuell noch nicht.

    Das Theme ist das hier: https://contao-themes.net/theme-detail/mate.html

    Ginge das mit dem Grid von Contao, bin beim googeln darüber gestolpert

  8. #8
    Contao-Fan Avatar von Birden
    Registriert seit
    15.01.2011.
    Beiträge
    766

    Standard

    Also wenn es sich nur um eine Tabelle mit Bilder und je einem Wort unter dem Bild handelt, ich würde das nicht mit einer Tabelle umsetzen. Da halte ich eine Galerie mit Bildunterschrift, responsiver und einfacher in der umsetzung.

  9. #9
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Generell, ja.

    Aber dann sind alle Bilder untereinander und nicht jeweils 3 nebeneinander

  10. #10
    Contao-Fan Avatar von Birden
    Registriert seit
    15.01.2011.
    Beiträge
    766

    Standard

    Bei der Galerie läßt sich einstellen, wie viel Bilder in der Reihe sein soll, ebenso der Abstand zwischen den Bildern, usw. usf.

  11. #11
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Aber in der Galerie mit Bildbeschriftung für jedes Bild?

    Woher bezieht die Galerie die Bildbeschriftungen?

  12. #12
    Contao-Fan Avatar von Birden
    Registriert seit
    15.01.2011.
    Beiträge
    766

    Standard

    In der Dateiverwaltung das Bild Bearbeiten, dort läßt sich Titel, Alternativer Text und Bildunterschrift eintragen, auf Wunsch auch mehrsprachig.

  13. #13
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Es gibt inzwischen sehr viele Möglichkeiten auch tabellarische Inhalte responsive zu gestalten, aber bei Dir scheint es ja nur um Bilder mit einer Bildunterschrift zu gehen.
    Da ist die Tabelle m.E. einfach das falsche "Werkzeug".
    Dafür sollte man wie schon von den Vorgängern geschrieben die Galerie (Core-Element) nutzen.
    Außerdem würde ich auch für die Bildunterschrift die dafür vorgesehenen Elemente verwenden
    Code:
    <figure> ... <figcaption>... </figcaption></figure>
    Das kannst Du dadurch erreichen, dass Du die Bildunterschrift in der Dateiverwaltung verwendest.
    Die Gestaltung würde ich persönlich mit CSS-Grid machen (zumindestens dann wenn man nicht auf den IE11 Rücksicht nehmen muss).
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  14. #14
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Den html Code hat Contao generiert, ich habe das vorhin lediglich kopiert.


    Ich hatte Grid vorhin versucht, aber nicht 3 Bilder nebeneinander bekommen. Immer nur Untereinander-
    Ich habe es jetzt über Contao Themes gelöst, 3 Spalten Links Mitte und Rechts.

    Vermutlich ist das eines der besten Möglichkeiten.

  15. #15
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Habe mir mal das Mate-Theme installiert und kann dein Nicht-Verhalten der Galerie nicht bestätigen, sofern du die Standard-Galerie verwendest ... 6 Bilder mit Bildunterschrift und einer Einstellung von 3 Bildern pro Reihe, ergibt 2 Reihen a 3 Bilder mit Bildunterschrift.

    Ich habe gesehen, dass hier Bootstrap mit installiert wird. Wenn du also die Bootstrap-Galerie anwenden möchtest, dann, so sehe ich, wird tatsächlich jedes Bild untereinander angezeigt. Hier musst du dich aber mit dem Bootstrap-Grid beschäftigen, sodass dir die Bilder dann auch wieder wie gewünscht in Reihe angezeigt werden.

    Also mein Fazit: Mate theme kann deinen Wunsch umsetzen ... du musst dich aber mit dem Grid und dem theme selbst ein wenig auseinandersetzen. Vielleicht installierst du dir noch die Demo mit dazu und versuchst die Demodaten nachzustellen.
    Grüsse
    Bernhard


  16. #16
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Die Galerie in 3 Spalten aufzuteilen war nichts das Problem. Nur das die über den Dateiupload angelegten Bild Meta Daten nicht angezeigt werden. Ich habe da einiges herumgespielt, aber die werden bei keiner Einstellung im Frontend angezeigt.

    Ich denke es liegt daran, dass die in der Galerie noch nicht eingebunden sind.

    In der Datei Templates › templates/gallery_default.html5


    PHP-Code:
    <ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
      <?php foreach ($this->body as $class => $row): ?>
        <?php foreach ($row as $col): ?>
          <?php if ($col->addImage): ?>
            <li class="<?= $class ?> <?= $col->class ?>">
              <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                <?php if ($col->href): ?>
                  <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default'$col->picture); ?></a>
                  
                <?php else: ?>
                  <?php $this->insert('picture_default'$col->picture); ?>
                <?php endif; ?>
                <?php if ($col->caption): ?>
                  <figcaption class="caption"><?= $col->caption ?></figcaption>
                <?php endif; ?>
              </figure>
            </li>
            
          <?php endif; ?>
        <?php endforeach; ?>
      <?php endforeach; ?>
    </ul>
    Ich habe hier versucht
    HTML-Code:
     <?= $col->linkTitle ?>
    mit anzugeben, aber leider wird hiermit kein Titel angezeigt.

    Was müsste ich einfügen, um die Metadaten Titel und alternativen Text anzeigen zu lassen?
    Geändert von Jinroo (14.03.2020 um 20:48 Uhr)

  17. #17
    Contao-Fan Avatar von Birden
    Registriert seit
    15.01.2011.
    Beiträge
    766

    Standard

    Wo werden die Eingetragen?

  18. #18
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Zitat Zitat von Birden Beitrag anzeigen
    Wo werden die Eingetragen?
    Ich habe die Metadaten über den Filamanger eingetragen. Also das Bild herausgesucht und auf bearbeiten gegangen.

    Wenn ich mit der Maus über das Bild gehe, dann wird der Titel angezeigt, allerdings eben nicht unter dem Bild

  19. #19
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Jinroo Beitrag anzeigen
    Nur das die über den Dateiupload angelegten Bild Meta Daten nicht angezeigt werden. Ich habe da einiges herumgespielt, aber die werden bei keiner Einstellung im Frontend angezeigt.
    wie oben erwähnt, funktionieren auch die Bildunterschriften in der Galerie.


    Dateiverwaltung - Bild bearbeiten - Bildunterschrift
    Grüsse
    Bernhard


  20. #20
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    wie oben erwähnt, funktionieren auch die Bildunterschriften in der Galerie.


    Dateiverwaltung - Bild bearbeiten - Bildunterschrift
    Ja, da habe ich die Meta Daten angegeben.


    Im Artikel habe ich als Elementtyp Galerie ausgewählt.

    Allerdings wird so nichts im Frontend angezeigt, oder geht das ausschließlich für die Bildunterschrift? Also Titel geht nicht?

    Alternativen Text habe ich gefunden
    HTML-Code:
    <figcaption class="caption"><?= $col->alt ?></figcaption>
    welche Varibale ist für den Bild Titel? Der hier zeigt leider ncihts an
    HTML-Code:
     <figcaption class="caption"><?= $col->linkTitle ?></figcaption>
    Geändert von Jinroo (14.03.2020 um 21:03 Uhr)

  21. #21
    Contao-Fan Avatar von Birden
    Registriert seit
    15.01.2011.
    Beiträge
    766

    Standard

    Wenn Du bei der Bildunterschrift nichts einträgst, geht es freilich nicht.

  22. #22
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Jinroo Beitrag anzeigen
    Allerdings wird so nichts im Frontend angezeigt, oder geht das ausschließlich für die Bildunterschrift? Also Titel geht nicht?
    ja, nur mit Bildunterschrift
    Wenn du das mit dem title machen möchtest, musst du das template anpassen
    Grüsse
    Bernhard


  23. #23
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    ja, nur mit Bildunterschrift
    Wenn du das mit dem title machen möchtest, musst du das template anpassen
    Ich möchte alle 3, also Titel alternativer Text und Bildunterschrift. Nur den Titel finde ich nicht, welche Variable ich da nehmen muss

  24. #24
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Code:
    <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
    Grüsse
    Bernhard


  25. #25
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    HTML-Code:
    <?= $col->linkTitle ?>
    geht eben nicht, das hatte ich bereits versucht. Siehr oben im Beitrag

  26. #26
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    Falls irgendwann jemand sucht, es ist

    HTML-Code:
    <?= $col->imageTitle ?>

  27. #27
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Code:
    <ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
      <?php foreach ($this->body as $class => $row): ?>
        <?php foreach ($row as $col): ?>
          <?php if ($col->addImage): ?>
            <li class="<?= $class ?> <?= $col->class ?>">
              <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                <?php if ($col->href): ?>
                  <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
                <?php else: ?>
                  <?php $this->insert('picture_default', $col->picture); ?>
                <?php endif; ?>
                <?php if ($col->caption): ?>
                  <figcaption class="caption"><?= $col->caption ?> <?= $col->linkTitle ?></figcaption>
                <?php endif; ?>
              </figure>
            </li>
          <?php endif; ?>
        <?php endforeach; ?>
      <?php endforeach; ?>
    </ul>
    ... klappt doch
    hattest du vielleicht irgendwo falsch eingebunden? probier obige Anpassung mal und du wirst das passende Ergebnis vor dir haben.
    Grüsse
    Bernhard


  28. #28
    Contao-Nutzer
    Registriert seit
    11.01.2016.
    Beiträge
    24

    Standard

    linkTitel geht bei mir eben nicht, habe etwas hin und her probiert und am ende bin ich bei imageTitel gelandet. Damit geht es.

    Allerdings habe ich nochmal eine doofe Frage zur Galerie.


    Das Originalbild ist 2674x3428, in der Galerie gebe ich unter Bildgrösse Proportional 450x270 an. Und im Frontend ist das Bild 279.73x359.66.

    Das verwirrt mich etwas, was sind das für Angaben in der Galerie?
    Geändert von Jinroo (14.03.2020 um 22:03 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •