web-dev-qa-db-fra.com

Modification de la largeur de colonne d'une vue de table (Drupal 7 vues 3)

J'ai une vue avec 4 colonnes. La première colonne, qui contient la majorité du texte, occupe environ 80% de la largeur du formulaire et oblige les 2e, 3e et 4e lignes à encapsuler. Le problème est que ces colonnes ont du contenu qui ne devrait pas vraiment être emballé pour exmaple mardi 15h - 17h finit par ressembler

You are

15h -

17h

Donc, plutôt que les colonnes s'ajustent en fonction du contenu, je voudrais définir manuellement la largeur de la première colonne afin qu'elle laisse suffisamment d'espace pour les autres. Ou si nécessaire, définissez manuellement toutes les largeurs de colonne.

S'il vous plaît, comprenez que je suis totalement perdu dans drupal et que je n'ai qu'une petite quantité de connaissances css/php donc soyez aussi absolument descriptif que possible. J'ai trouvé un tas d'exemples dans d'autres domaines mais les gens ont laissé de gros morceaux de code, ou où il est censé aller, etc. Un endroit gardé dit "apporter des modifications au css", je ne sais pas si c'est normal mais j'ai environ 25 fichiers css différents dans mon drupal installer, je n'avais aucune idée de QUEL CSS pour effectuer le changement.

Merci d'avance pour votre aide! C'est une super communauté et je suis content d'avoir choisi Drupal à cause de cela.

5
TheMad Hatter

Une approche plus générale que les réponses utiles de @ Michael Greisman @ Neograph734 consiste à créer des classes CSS utilitaires qui peuvent être déployées sur n'importe quelle vue. Cela signifie que si cette exigence apparaît lors de la création d'une nouvelle vue, vous disposez déjà d'une solution prête à être déployée.

C'est quelque chose qui a été vraiment utile sur un site où j'ai la responsabilité de la configuration mais tout le travail sur les modèles/CSS est effectué par un développeur sous contrat (qui a suggéré cette approche).

  1. Créez des classes CSS qui peuvent être utilisées pour fixer les largeurs de colonne. Dans notre cas, l'utilisation des valeurs% a fonctionné le mieux, mais faites tout ce qui est logique pour votre site. Exemple:

    .fix-width-20 {
    width: 20%;
    }
    .fix-width-40 {
    width: 40%;
    }
    .fix-width-50 {
    width: 50%;
    }
    
  2. Dans une vue au format tableau, accédez aux "Paramètres de style" pour le champ qui remplit la ou les colonnes où vous souhaitez contrôler avec précision la largeur des colonnes. Ajoutez le nom de la classe CSS qui fixe la largeur. Exemple:

enter image description here

8
Obliquely

Oke, vous devrez faire deux choses. La première chose est de savoir quel nom a été donné à la première colonne. Les vues nommeront (presque) tout ce qu'elles créent.

Ouvrez la page avec le tableau, puis cliquez avec le bouton droit sur le tableau et choisissez "inspecter l'élément" (cette migration dépend de votre navigateur Web, vous pouvez également afficher le code source).

Vous trouverez du HTML comme ci-dessous:

<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">
    ...

Comme vous pouvez le voir, chaque premier champ est appelé views-field-title (essentiellement le nom du premier champ).

Dans votre CSS, vous pouvez définir une largeur en écrivant quelque chose comme ceci:

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

Le meilleur endroit pour poser cela est une question difficile. La meilleure façon serait d'écrire un module personnalisé qui utilise la fonction drupal_add_css pour ajouter un fichier css à la page. Cependant, c'est assez difficile pour 3 lignes de code.

Dans ce cas, je pense que l'ajouter au bas du CSS de votre thème fonctionnera tout aussi bien (si vous mettez à jour votre thème, vous devrez peut-être l'ajouter à nouveau). Aussi, si vous avez des utilisateurs qui peuvent choisir différents thèmes, assurez-vous de les ajouter à chacun d'eux.

1
Neograph734

@ TheMad-Hatter, les premiers conseils que vous avez reçus étaient corrects; il s'agit d'un problème de style, à résoudre en utilisant CSS. Il existe (bien sûr) plusieurs façons de procéder, mais la plus simple consiste à modifier la feuille de style de votre thème.

Si vous ne savez pas quelle feuille de style corriger, modifiez style.css. Si cela est remplacé par d'autres règles de style (c'est-à-dire que vous savez que vous avez bien fait, vous avez effacé les caches, mais ne voyez toujours pas le changement) ... alors je suis désolé d'être franc, mais vous ' va devoir apprendre suffisamment de CSS pour y faire face. Cependant, cela en vaut la peine.

  • Le moyen rapide consiste à modifier le fichier style.css dans votre thème.
  • La façon la plus correcte consiste à créer un thème enfant (si vous n'en avez pas déjà un)
    et changez le fichier style.css en cela. De cette façon, vous pouvez appliquer des mises à jour à votre thème parent sans perdre cet ajout.

Solutions CSS:

Vous pouvez styliser la largeur de la première colonne, peut-être comme ceci:

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

Cependant, cela ne protégera pas nécessairement les colonnes 2-4 de l'encapsulation, vous pouvez donc utiliser ceci à la place:

.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, et les 25 feuilles de style sont normales. C'est un tout autre ensemble de maux de tête.

1
Michael Greisman
white-space: nowrap;

/ * Ajout de l'espace blanc: nowrap a fonctionné comme un charme pour les tableaux, n'a pas eu besoin d'ajouter les options de largeur.

Merci Michael Greisman

0
Matt