IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

"saut de ligne" avec une grille CSS en auto-flow


Sujet :

Grille CSS (CSS Grid)

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif

    Homme Profil pro
    Responsable projets techniques
    Inscrit en
    Février 2003
    Messages
    980
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Responsable projets techniques
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Février 2003
    Messages : 980
    Par défaut "saut de ligne" avec une grille CSS en auto-flow
    Bonjour à tous,

    je cherche un moyen propre de transposer un formulaire de calcul initialement en Excel vers un simple fichier html (avec un soupçon de css et de javascript).

    N'ayant pas du tout suivi les dernières évolutions html5/css3, j'ai découvert pas mal de choses... j'ai commencé par essayé flex puis grille et j'ai trouvé que le second se prêtait nettement plus à mon besoin qui était d'aligner horizontalement et verticalement des libellés et des zones de saisies.

    J'ai donc quelque chose comme ça dans le html (avec beaucoup plus de lignes):
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="calc">
      <label for="aaa">Question 1</label>
      <input type="text" id="aaa" value="" maxlength="5">
      <div class="filler"></div>
      <label for="bbb">Question 2</label>
      <input type="text" id="bbb" value="">
      <label for="ccc">Question 3</label>
      <input type="checkbox" id="ccc" value="ccc">
      <label for="ddd">Question 4</label>
      <input type="text" id="ddd" value="">
    </div>
    Et le css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .calc {
    	display: grid;
    	grid-template-columns: repeat(3, max-content 1fr);
    	grid-auto-flow: row;
    	grid-gap: 5px;
    }
     
    .filler {
    	grid-column-end: -1;
    }
    Ça répond exactement à mon besoin : j'ai les 6 colonnes dont j'ai besoin (3 paires de libellé/valeurs), les colonnes des libellés prennent la largeur du plus grand élément de la colonne et les colonnes de valeurs se répartissent l'espace restant et font la même dimension.
    Il me reste 2 questions :
    1) est-ce que je ne suis pas complètement à côté de la plaque dans mon choix technique ou est-ce qu'il y a autre chose qui serait plus adapté ?
    2) certaines questions sont indépendantes et d'autres sont liées, c'est pour ça que j'ai 6 colonnes : il y a pas mal de lignes qui ont les 3 paires de libellés+valeurs et quelques lignes qui n'ont qu'une ou deux paires. J'ai donc cherché un moyen "d'arrêter une ligne" sans avoir à positionner explicitement chaque élément sur la grille (y'en a beaucoup) ; le meilleur moyen que j'ai trouvé pour le moment c'est avec le <div class="filler"></div> et le style grid-column-end: -1;. Est-ce que ce qu'il y aurait un autre moyen plus propre ? (je voulais utiliser une balise <br class="filler"> mais ça ne marche pas ?).

    Merci d'avance pour votre aide !

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    le système de grid n'est pas compatible avec I.E.

    Autre solution :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <div class="calc">
      <div>
        <label for="aaa">Question 1</label>
        <input type="text" id="aaa" value="" maxlength="5">
      </div>
      <div>
        <label for="bbb">Question 2</label>
        <input type="text" id="bbb" value="">
        <label for="ccc">Question 3</label>
        <input type="checkbox" id="ccc" value="ccc">
        <label for="ddd">Question 4</label>
        <input type="text" id="ddd" value="">
      </div>
      <div>
        <label for="bbb">Question 2</label>
        <input type="text" id="bbb" value="">
        <label for="ccc">Question 3</label>
        <input type="checkbox" id="ccc" value="ccc">
        <label for="ddd">Question 4</label>
        <input type="text" id="ddd" value="">
      </div>
      <div>
        <label for="eee">Question 5</label>
        <input type="text" id="eee" value="">
        <label for="fff">Question 6</label>
        <input type="text" id="fff" value="">
       </div>
    </div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .calc > div { display:flex; display:-webkit-flex; }
    .calc > div > label { -webkit-flex:0 0 10%; flex:0 0 10%; margin:5px; }
    .calc > div > input { -webkit-flex:1 1 20%; flex:1 1 20%; margin:5px; padding:5px; }

    Sinon, il faut pousser un peu plus loin, en englobant les couples label/input avec un <div> :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <div class="calc">
      <div>
        <div>
          <label for="aaa">Question 1</label>
          <input type="text" id="aaa" value="" maxlength="5">
        </div>
      </div>
      <div>
        <div>
          <label for="bbb">Question 2</label>
          <input type="text" id="bbb" value="">
        </div>
        <div>
          <label for="ccc">Question 3</label>
          <input type="checkbox" id="ccc" value="ccc">
        </div>
        <div>
          <label for="ddd">Question 4</label>
          <input type="text" id="ddd" value="">
        </div>
      </div>
      <div>
        <div>
          <label for="eee">Question 5</label>
          <input type="text" id="eee" value="">
        </div>
        <div>
          <label for="fff">Question 6</label>
          <input type="text" id="fff" value="">
        </div>
      </div>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    * { box-sizing:border-box; }
    .calc > div { display:flex; display:-webkit-flex; }
    .calc > div > div { -webkit-flex:0 0 33.33%; flex:0 0 33.33%; padding:5px; 
    display:flex; display:-webkit-flex; }
     
    .calc > div > div > label { -webkit-flex:1 1 30%; flex:0 0 30%; padding:5px; }
    .calc > div > div > input { -webkit-flex:1 1 70%; flex:0 0 70%; padding:5px; }
    Dernière modification par ProgElecT ; 09/04/2018 à 11h47.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    le système de grid n'est pas compatible avec I.E.


    Même si I.E. ne représente plus que 7%, ce n'est pas négligeable (cf les statistiques 2017).

  4. #4
    Membre très actif

    Homme Profil pro
    Responsable projets techniques
    Inscrit en
    Février 2003
    Messages
    980
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Responsable projets techniques
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Février 2003
    Messages : 980
    Par défaut
    Bonjour,

    merci pour ces premières réponses, j'ai oublié un détail important (désolé): ça n'est pas destiné à aller sur le net : c'est un outil interne, donc je connais les postes et les navigateurs utilisés (et IE n'en fait pas partie ) !

    @danielhagnoul: je voulais justement éviter de placer chaque élément parce que j'en ai une palanquée ! Si je dois modifier l'ordre ou autre, je vais pleurer !
    @jreaux62: merci pour l'option flex. Je vais l'étudier pour tout comprendre et la garder sous le coude si un jour j'ai besoin de généraliser, mais comme ça me semble plus complexe et que je n'ai pas de problème de compatibilité, je vais sans doute rester sur la grille pour le moment

    Merci encore !

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    On peut choisir de placer chaque élément de la grille à une position déterminée. Exemple :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <div class="calc">
        <div class="question1">
            <label for="aaa">Question 1</label>
            <input type="text" id="aaa" value="" maxlength="5">
        </div>
        <div class="question2">
            <label for="bbb">Question 2</label>
            <input type="text" id="bbb" value="">
        </div>
        <div class="question3">
            <label for="ccc">Question 3</label>
            <input type="checkbox" id="ccc" value="ccc">
        </div>
        <div class="question4">
            <label for="ddd">Question 4</label>
            <input type="text" id="ddd" value="">        
        </div>
        <div class="question5">
            <label for="aaa2">Question 5</label>
            <input type="text" id="aaa2" value="" maxlength="5">
        </div>
        <div class="question6">
            <label for="bbb2">Question 6</label>
            <input type="text" id="bbb6" value="">
        </div>
        <div class="question7">
            <label for="ccc2">Question 7</label>
            <input type="checkbox" id="ccc2" value="ccc">
        </div>
        <div class="question8">
            <label for="ddd2">Question 8</label>
            <input type="text" id="ddd2" value="">        
        </div>
    </div>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    .calc {
    	display: grid;
    	grid-template-columns: repeat(3, 1fr);		
    	grid-template-rows: repeat(min-content, 6);
    	grid-gap: 5px;
    }
    div[class^='question'] {
    	border: 1pt dotted blue;
    }
    .question1 {
    	grid-column: 1;
    	grid-row: 1;
    }
    .question2 {
    	grid-column: 1;
    	grid-row: 2;
    }
    .question3 {
    	grid-column: 2;
    	grid-row: 2;
    }
    .question4 {
    	grid-column: 3;
    	grid-row: 2;
    }
    .question5 {
    	grid-column: 1;
    	grid-row: 4;
    }
    .question6 {
    	grid-column: 3;
    	grid-row: 4;
    }
    .question7 {
    	grid-column: 2;
    	grid-row: 5;
    }
    .question8 {
    	grid-column: 3;
    	grid-row: 6;
    }

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Trouver le numéro de ligne réel dans une grille
    Par Margance dans le forum VB 6 et antérieur
    Réponses: 1
    Dernier message: 18/11/2011, 13h06
  2. saut de ligne CSV avec open O. calc
    Par maximus30 dans le forum Langage
    Réponses: 1
    Dernier message: 24/09/2011, 10h07
  3. Réponses: 10
    Dernier message: 06/05/2010, 20h51
  4. Supprimer une ligne excel avec une condition
    Par Quentin006 dans le forum Excel
    Réponses: 4
    Dernier message: 28/05/2009, 11h45
  5. Réponses: 14
    Dernier message: 07/09/2007, 22h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo