Mise en place CSS sur élément dynamique

**Raptor92** · 19/02/2024, 10h58

Bonjour à Tous,

Je rencontre un soucis auquel je ne vois pas mon erreur, dans le code joint, j'ai un sélecteur et en dessous un input, lorsque je place un sélecteur "normal", je n'ai pas de soucis, mais dès que le sélecteur est issue d'une requête, l'espace entre les deux champs disparait.

Pourriez vous m'indiquer où est mon erreur svp.
Merci beaucoup

Code :

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
              <div class="boite">
                <?php
                require('../simag/requete/userlistReq.php');
                $query = $bdd->prepare('SELECT SUP_NAME FROM SUPPLIER');
                $query->execute();
                echo '<label for="pet-select">Fournisseur :</label>';
                echo '<select class="selecteur"  name="fourname" id="fourname">';
                while ($data = $query->fetch()) {
                  $selected = $data['SUP_NAME'] == $fourname ? ' selected="selected"' : '';
                  echo '<option value="' . $data['SUP_NAME'] . '"' . $selected . '>' . $data['SUP_NAME'] . '</option>';
                }
                ?>
              </div>
              <div class="boite">
                <label>Code fournisseur</label>
                <input type="text" name="fourcode">
              </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
.boite {
  position: relative;
  display: flex;
  /*Marge entre les champs*/
  margin-top: 6px;
  /*Place les intitulés au dessus des chmaps*/
  flex-direction: column;
}
 .selecteur {
padding: 10px 5px 10px 30px;
  border: 1px solid #3e3c3c;
  outline-color: red;
  border-radius: 5px;
  /*Marge entre le libellé et le chmaps */
  margin-top: 5px;
  /*Largeur des input*/
  width: 250px;
}

**mathieu** · 19/02/2024, 13h31

il y a un souci d'accolades dans votre code css, à quoi correspondent celles aux lignes 8 et 17 ?

et pour qu'on puisse tester, il faudrait que vous nous montriez un exemple de code html généré.

**Raptor92** · 19/02/2024, 13h50

Bonjour,

Merci de me répondre..

Pour le CSS, j'ai rectifié plus haut, juste une erreur de copié/coller mais le code était correct (enfin...je pense)
Pour le résultat, voici une impression écran du résultat
Ce qui me pose soucis, c'est que lorsque je remplace par un select "normal", ma mise en page est parfaite

Le code de la page ..

Code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
  <main class="main-content">
    <!-- DEBUT DE PAGE -->
    <!--  CTRL du droit d'accès  -->
    <?php $page = "Article";
    $action = "Connexion" ?>
    <?php require('../simag/inc/droitacces.inc.php'); ?>
    <!--  ----------------------  -->
    <section>
      <h1>Création des articles</h1>
      <p></p>
      <form action="/requete/articleInsert.php" method="post">
        <!-- 1er DIV -->
        <div class="columns">
          <div class="container">
            <div class="item1">
 
              <div class="droite">
                <div class="boite">
                  <label>Code Article</label>
                  <input type="text" name="code">
                  <i class="fa-solid fa-user"></i>
                </div>
              </div>
              <div class="boite">
                <label>Désignation</label>
                <input type="text" name="design">
                <i class="fa-solid fa-mobile"></i>
              </div>
              <div class="boite">
                <label for="pet-select">Unité de mesure:</label>
                <select name="unit" id="pet-select" class="tva">
                  <option name="sizeNum" value="34-56">34-56</option>
                  <option name="sizeAlpha" value="S-XXXL">S-XXXL</option>
                  <option name="unite" value="unite">Unité</option>
                  <option name="poid" value="poid">Poids</option>
                </select>
              </div>
              <div class="boite">
                <?php
                require('../simag/requete/userlistReq.php');
                $query = $bdd->prepare('SELECT COL_CODE,COL_LIBELLE FROM COLORS');
                $query->execute();
                echo '<label for="pet-select">Fournisseur :</label>';
                echo '<select class="selecteur"  name="fourname" id="fourname">';
                while ($data = $query->fetch()) {
                  echo '<option value="' . $data['COL_CODE'] . '"' . $data['COL_LIBELLE'] . '>' . $data['COL_CODE'] . '-' . $data['COL_LIBELLE'] . '</option>';
                }
                ?>
              </div>
              <div class="boite">
                <label for="box">Conditionnement:</label>
                <select name="box" id="bos" class="tva">
                  <option name="unit" value="unit">Unité</option>
                  <option name="lot" value="lot">Lot</option>
                  <option name="carton" value="carton">Carton</option>
                  <option name="poid" value="poid">Poids</option>
                </select>
              </div>
            </div>
          </div>
          <!-- 2eme DIV    -->
          <div class="container">
            <div class="item2">
              <div class="boite">
                <?php
                require('../simag/requete/userlistReq.php');
                $query = $bdd->prepare('SELECT SUP_NAME FROM SUPPLIER');
                $query->execute();
                echo '<label for="pet-select">Fournisseur :</label>';
                echo '<select class="selecteur"  name="fourname" id="fourname">';
                while ($data = $query->fetch()) {
                  $selected = $data['SUP_NAME'] == $fourname ? ' selected="selected"' : '';
                  echo '<option value="' . $data['SUP_NAME'] . '"' . $selected . '>' . $data['SUP_NAME'] . '</option>';
                }
                ?>
              </div>
              <div class="boite">
                <label>Code fournisseur</label>
                <input type="text" name="fourcode">
              </div>
              <div class="boite">
                <label>Référence fournisseur</label>
                <input type="text" name="fourref">
              </div>
            </div>
          </div>
          <!--   3eme DIV    -->
          <div class="container">
            <div class="item3">
              <div class="boite">
                <label>Date</label>
                <script>
                  document.getElementById("Aujourdhui").valueAsDate = new Date();
                </script>
                <input type="date" name="create" value="<?php echo date('Y-m-d'); ?>">
              </div>
              <div class="boite">
                <label>Date de modification</label>
                <input class="selecteur" type="date" id="start" name="modif" value="<?php echo date('Y-m-d'); ?>" />
              </div><br><br><br>
              <div class="boite">
                <label>Commentaires</label>
                <textarea name="comments"></textarea>
              </div>
            </div>
          </div>
          <!-- FIN DE ITEMS  -->
        </div>
        <div class="btn1">
          <div><input class="btn" type="submit" name="Envoi" value="Enregistrer"></div>
          <div><button class="btn">Effacer</button></div>
          <div><button class="btnAdmin">Supprimer</button></div><br><br>
          <div><button class="btn"><a href="extranet.php" class="btna">Accueil</a></button></div>
        </div>
      </form>
 
      <?php
      if (isset($_POST['Envoi'])) { // si formulaire soumis
        echo $_POST['code'];
        echo $_POST['design'];
        echo $_POST['unit'];
        echo $_POST['col'];
        echo $_POST['fourcode'];
        echo $_POST['fourref'];
        echo $_POST['create'];
        echo $_POST['modif'];
        echo $_POST['comments'];
      }
      if (isset($_POST['box'])) {
        echo $_POST['box'];
      }
      if (isset($_POST['fourname'])) {
        echo $_POST['fournmane'];
      }
      $page = "Création article";
      $action = "Création";
      require('../simag/inc/droitacces.inc.php');
      ?>
 
    </section>
 
  </main>

Merci beaucoup pour votre aide

**Raptor92** · 19/02/2024, 14h04

J'ai remarqué qu'il me manquait le </select> en fin de code mais du coup, j'ai un dernier soucis, le résultat de la requête s'affiche sous le select et non pas à l'intérieur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
                <?php
                require('../simag/requete/userlistReq.php');
                $query = $bdd->prepare('SELECT SUP_NAME FROM SUPPLIER');
                $query->execute();
                echo '<label for="pet-select">Fournisseur :</label>';
                echo '<select class="selecteur"  name="fourname" id="fourname">';
                while ($data = $query->fetch()) { 
                  echo '<option value="' . $data['SUP_NAME'] . '">' . $data['SUP_NAME'] . '</option></select>';
                }
                ?>

**Raptor92** · 19/02/2024, 14h09

J'ai fini par trouver, en fait, j'ai commis l'erreur de mettre la fermeture du select à l'intérieur du code PHP alors qu'il fallait le mettre en dehors

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
                <?php
                require('../simag/requete/userlistReq.php');
                $query = $bdd->prepare('SELECT COL_CODE,COL_LIBELLE FROM COLORS');
                $query->execute();
                echo '<label for="pet-select">Fournisseur :</label>';
                echo '<select class="selecteur"  name="fourname" id="fourname">';
                while ($data = $query->fetch()) {
                  echo '<option value="' . $data['COL_CODE'] . '"' . $data['COL_LIBELLE'] . '>' . $data['COL_CODE'] . '-' . $data['COL_LIBELLE'] . '</option>';
                }
                ?>
                </select>

Merci beaucoup, notre bref échange m'a obligé à mieux réfléchir
Bonne journée

Mise en place CSS sur élément dynamique

HTML

Discussions similaires

Partager

Partager