it-swarm.com.de

Ändern der Spaltenbreite einer Tabellenansicht (Drupal 7-Ansichten 3)

Ich habe eine Ansicht mit 4 Spalten. Die erste Spalte, die einen Großteil des Textes enthält, nimmt ungefähr 80% der Breite des Formulars ein und zwingt die 2., 3. und 4. Zeile zum Umbrechen. Das Problem ist, dass diese Spalten Inhalte enthalten, die nicht wirklich verpackt werden sollten, z. B. Dienstag, 15 bis 17 Uhr

Dienstag

3 Uhr nachmittags -

17 Uhr

Anstatt die Spalten basierend auf dem Inhalt anzupassen, möchte ich die Breite der ersten Spalte manuell so einstellen, dass genügend Platz für die anderen bleibt. Oder stellen Sie bei Bedarf alle Spaltenbreiten manuell ein.

Bitte haben Sie Verständnis dafür, dass ich mich in drupal] total verlaufen habe und nur wenig CSS/PHP-Kenntnisse habe. Seien Sie also bitte so beschreibend wie möglich. Ich habe eine Reihe von Beispielen in anderen Bereichen gefunden, aber in Menschen Ich habe große Teile des Codes ausgelassen, oder wohin er gehen soll usw. An einer Stelle steht "Änderungen am CSS vornehmen", nicht sicher, ob es normal ist, aber ich habe ungefähr 25 verschiedene CSS-Dateien in meinem drupal install, ich hatte keine Ahnung, in welchem ​​CSS die Änderung vorgenommen werden sollte.

Vielen Dank im Voraus für jede Hilfe! Dies ist eine großartige Community und ich bin froh, dass ich mich für Drupal deswegen) entschieden habe.

5
TheMad Hatter

Ein allgemeinerer Ansatz als nützliche Antworten von @ Michael Greisman @ Neograph734 besteht darin, einige Dienstprogramm-CSS-Klassen zu erstellen, die in jeder Ansicht bereitgestellt werden können. Wenn diese Anforderung beim Erstellen einer neuen Ansicht auftritt, steht bereits eine Lösung zur Bereitstellung bereit.

Dies ist sehr hilfreich auf einer Site, auf der ich für die Konfiguration verantwortlich bin, aber alle Vorlagen-/CSS-Arbeiten von einem Vertragsentwickler ausgeführt werden (der diesen Ansatz vorgeschlagen hat).

  1. Erstellen Sie einige CSS-Klassen, mit denen Spaltenbreiten festgelegt werden können. In unserem Fall hat die Verwendung von% -Werten am besten funktioniert, aber tun Sie, was für Ihre Site sinnvoll ist. Beispiel:

    .fix-width-20 {
    width: 20%;
    }
    .fix-width-40 {
    width: 40%;
    }
    .fix-width-50 {
    width: 50%;
    }
    
  2. Wechseln Sie in einer Ansicht mit dem Tabellenformat zu den 'Stileinstellungen' für das Feld, das die Spalte (n) füllt, in der Sie die Spaltenbreite genau steuern möchten. Fügen Sie den Namen der CSS-Klasse hinzu, die die Breite festlegt. Beispiel:

enter image description here

8
Obliquely

Oke, du musst zwei Dinge tun. Als erstes müssen Sie herausfinden, welcher Name der ersten Spalte gegeben wurde. Ansichten benennen (fast) alles, was es erstellt.

Öffnen Sie die Seite mit der Tabelle, klicken Sie mit der rechten Maustaste auf die Tabelle und wählen Sie "Element überprüfen" (diese Größe hängt von Ihrem Webbrowser ab, Sie können auch den Quellcode anzeigen).

Sie finden HTML wie folgt:

<table class="views-table cols-4">
 <thead>
  <tbody>
   <tr class="odd views-row-first">
    <td class="views-field views-field-title">
    <td class="views-field views-field-uid">
    <td class="views-field views-field-body">
    <td class="views-field views-field-custom">
   </tr>
   <tr class="even">
    <td class="views-field views-field-title">
    <td class="views-field views-field-uid">
    ...

Wie Sie sehen können, heißt jedes erste Feld views-field-title (im Grunde der Name des ersten Feldes).

In Ihrem CSS können Sie eine Breite festlegen, indem Sie Folgendes schreiben:

.views-field-title {
  width: 60%;
}

Der beste Ort, um dies auszudrücken, ist eine schwierige Frage. Der beste Weg wäre, ein benutzerdefiniertes Modul zu schreiben, das die Funktion drupal_add_css verwendet, um der Seite eine CSS-Datei hinzuzufügen. Es ist jedoch ein ziemlich schwieriger Weg für 3 Codezeilen.

In diesem Fall funktioniert das Hinzufügen am Ende des CSS Ihres Themas genauso gut (wenn Sie Ihr Theme aktualisieren, müssen Sie es möglicherweise erneut hinzufügen). Wenn Sie Benutzer haben, die verschiedene Themen auswählen können, stellen Sie sicher, dass Sie sie allen hinzufügen.

1
Neograph734

@ TheMad-Hatter, der frühere Rat war richtig; Dies ist ein Styling-Problem, das mithilfe von CSS behoben werden muss. Es gibt (natürlich) mehrere Möglichkeiten, dies zu tun. Am einfachsten ist es jedoch, das Stylesheet für Ihr Thema zu ändern.

Wenn Sie nicht wissen, welches Stylesheet korrigiert werden soll, ändern Sie style.css. Wenn dies durch andere Stilregeln überschrieben wird (das heißt, Sie wissen, dass Sie es richtig gemacht haben, Sie haben die Caches geleert, sehen aber die Änderung immer noch nicht) ... dann tut es mir leid, stumpf zu sein, aber Sie ' Wir müssen genug CSS lernen, um damit umzugehen. Es ist jedoch garantiert die Zeit wert.

  • Der schnelle Weg besteht darin, die Datei style.css in Ihrem Design zu ändern.
  • Der korrektere Weg ist, ein untergeordnetes Thema zu erstellen (falls Sie noch keines haben).
    und ändern Sie die Datei style.css darin. Auf diese Weise können Sie Aktualisierungen auf Ihr übergeordnetes Thema anwenden, ohne diesen Zusatz zu verlieren.

CSS-Lösungen:

Sie können die Breite der ersten Spalte wie folgt gestalten:

.this-view table td:first-child {
  width: 55%;
}

Dies schützt die Spalten 2 bis 4 jedoch nicht unbedingt vor dem Umbruch. Daher sollten Sie stattdessen Folgendes verwenden:

.this-view table td {
  /* initially set all columns to not wrap */
  white-space: nowrap;
}
.this-view table td:first-child {
  /* then set the first column to wrap normally */
  white-space: normal;
}

Oh, und die 25 Stylesheets sind normal. Das sind ganz andere Kopfschmerzen.

1
white-space: nowrap;

/ * Hinzufügen des Leerraums: nowrap funktionierte wie ein Zauber für die Tabellen, musste die Breitenoptionen nicht hinzufügen.

Danke Michael Greisman

0
Matt