en EN de DE
Welcome, Guest
Username: Password: Remember me
Please select the right Template below! And please insert a live URL where we can see what do you mean. A screenshot is helpful too.

TOPIC: [SOLVED] Responsive Table

Responsive Table 1 month 2 days ago #1

  • MelJ
  • MelJ's Avatar
  • Offline
Hallo
Ich habe übers Weekend meine erste Seite basierend auf dem "Perfect" Template gebaut. Es ist nur eine Seite und nur statischer Text und Bilder.
Nun habe ich in einem Modul (Unsere Leistungen) verschiedene Auflistungen (siehe Bild -> Website ist noch nicht live, daher gibt es noch keinen Live-URL).

Im Moment habe ich die Anordnung der Listen mit einer Tabelle gelöst (siehe Editer Bild), jedoch funktioniert dies nicht im Mobile oder Tablet Rendering (Section ist viel breiter als Rest der Seite)
Ich habe im Code die Spaltenbreite mit % angegeben, damit sie immer im gleichen Verhältnis sind. Code Auszug:

[...]
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 30%; vertical-align: top;">
<p><strong>Grundleistungen</strong></p>
<ul>
<li>Erstkonsultation</li>
<li>Folgeskonsultation</li>
<li>Hospitalisation</li>
<li>Zeugnis ud Identifizierung</li>
<li>Euthanasie</li>
</ul>
</td>
<td style="width: 20px;"> </td>
<td style="width: 30%; vertical-align: top;">
<p><strong>Diagnostik</strong></p>
<ul>
<li>Röntgendiagnostik</li>
<li>Blutentnahme</li>
<li>Harnuntersuchung</li>
<li>Kotuntersuchung</li>
<li>Röntgenaufnahme</li>
<li>Ultraschalluntersuchung</li>
</ul>
</td>
[...]
Ich hatte ursprünglich den Titel und den sub-text in einer separaten Section und die Spalten als einzelne Module in der nächsten Section. Da jedoch der Abstand zwischen den Section zu gross ist, machte dies keinen Sinn.

Wie kann ich das Darstellungsproblem lösen, sodass es auch für Mobile und Tablet funktioniert? Ich bin am Ende meines Joomla-Junior-Latein :)
Attachments:
The administrator has disabled public write access.

Responsive Table 1 month 2 days ago #2

  • MelJ
  • MelJ's Avatar
  • Offline
Auch mit RockSprocket komme ich nicht auf einen grünen Zweig, da ich gerne die Bulletpoints als Auflistung zeigen möchte
The administrator has disabled public write access.

Responsive Table 1 month 2 days ago #3

  • joomlaplates
  • joomlaplates's Avatar
  • Offline
Hallo,
Tabellen und mobile ready ist fast nicht möglich oder auch sinnfrei, da die Tabellen auf dem Phone bei einer Breite von 352px nicht nebeneinander dargestellt werden können und somit auch die Tabelle keinen Sinn macht, lesbar ist
Aber eventuell hilft das Uikit > Table
getuikit.com/v2/docs/table.html
The administrator has disabled public write access.

Responsive Table 1 month 2 days ago #4

  • MelJ
  • MelJ's Avatar
  • Offline
Hallo
Besten Dank für die Antwort.
Ich muss nicht unbedingt eine Tabelle benützen. Ich möchte die verschiedenen Kategorien einfach als kleine Kacheln anzeigen lassen, welche jedoch formatierten Text enthalten (Bullet Points). Die Funktionen, welche ich bis anhin gesehen haben erstellen Kacheln, jedoch wir der Text (vom Artikel) unformatiert angezeigt.

Wenn ich es mit einzelnen Modulen in der gleichen Section löse (z.b. alles im top-d), dann ist mir nicht klar wie ich den Einleitungstext als einziges über die Unterkategorien legen kann. (so wie im Bild).
Wenn ich den Titel und Einleitungstext in eine höhere Section verlege (z.b. Titel & Einleitung im top-c, Unterkategorien als einzelne Module im top-d), ist der Abstand zu den Unterkategorien "zu gross" (=Abstand zwischen top-c und top-d). Aber wenn ich im Perfect diesen Abstand reduzieren könnte, wäre ich auch schon ganz happy!
Oder halt irgend eine andere alternative.. ich bin selber mit der Tabelle auch nicht ganz glücklich
The administrator has disabled public write access.

Responsive Table 1 month 2 days ago #5

  • joomlaplates
  • joomlaplates's Avatar
  • Offline
Hallo, da gibt es viele Möglichkeiten, dies darzustellen.
Eventuell ein Grid in einem Module
getuikit.com/v2/docs/grid.html
The administrator has disabled public write access.

Responsive Table 1 month 1 day ago #6

  • MelJ
  • MelJ's Avatar
  • Offline
Hallo

Herzlichen Dank! Das war die Lösung zu meinem Problem :) Ich konnte gleich noch ein paar andere Module mit dem Uikit optimieren. Genial!

Ich habe aber nun noch ein Problem mit dem Template, nämlich die Menu bar ist suboptimal. Desktop Version ist es tip top, Tablett verzieht es sich (d.h. auf zwei Zeilen und Schrift im Vordergrund der Beiträge) und im Mobile rendering erscheint nur noch einen leeren weisser Balken, ohne Inhalt. Passiert im verkleinerten Fenster auf dem Desktop und auf dem Iphone 11 (Browser Chrome, Firefox, und Iphone -> Safari)

Habe ich irgendwas vergessen einzustellen? Bzw. Ich sehe auch nicht wo ich im Perfect Veränderungen diesbezüglich machen könnte,. bzw. wo ich noch schauen könnte.
Das Main-Menu habe ich der Position "menu" assigned.

PS: Bitte melden, wenn ich einen separaten Post für dieses Problem erstellen soll.

Danke und Grüsse

Mélanie
Attachments:
The administrator has disabled public write access.

Responsive Table 1 month 1 day ago #7

  • joomlaplates
  • joomlaplates's Avatar
  • Offline
Hallo, zuviel Menupunkte werden umgebrochen.
Entweder weniger Menupunkte, schmälere Schrift, oder die Breakpoints ändern so dass das Mobilemenu früher kommt.
Forumsuche > Breakpoint
The administrator has disabled public write access.
The following user(s) said Thank You: MelJ

[SOLVED] Responsive Table 3 weeks 6 days ago #8

  • MelJ
  • MelJ's Avatar
  • Offline
Problem solved.
The administrator has disabled public write access.
Moderators: joomlaplates

Einzelnes Theme ( Download 1 Template)

Das sog. "Einzelne Theme" ist für alle Kunden geeignet die lediglich ein (1) Template benötigen, egal ob kommerziell oder privat genutzt. Sie dürfen das erworbene Template auf einer Joomla Installation produktiv nutzen.


Mitgliedschaft ( Download alle Templates)

Während ihrer Mitgliedschaft ist es ihnen erlaubt alle Templates herunter zu laden und unseren Bestimmungen entsprechend zu nutzen. Nach Ablauf der Mitgliedschaft dürfen sie natürlich alle bereits in Nutzung befindlichen Templates weiter einsetzen. Sie haben jedoch nach Ende ihrer Mitgliedschaft keinen Zugriff mehr auf den Download Bereich und keinen Zugriff mehr auf Updates.

Die Zahlung ist einmalig und ihr Membership läuft automatisch aus, sofern sie es nicht erneuern.

Unsere Mitgliedschaften bieten wir ausschließlich über JoomlaPlates.com an.

Jetzt kaufen