J'ai créé une page de voyage via HTML et CSS et j'ai ajouté un bouton pour ajouter un autre voyage dans le même mais après avoir cliqué sur le bouton plus de 5 fois, le formulaire sort de la région. Il semble que le problème vienne des styles, mais je n'arrive pas à comprendre le même.

Cliquez ici pour reproduire le problème

<div class="form-row">
   <button class="btn btn-primary" type="button" onclick="displayResult()">Add another trip</button>
</div>
2
Lucifer 13 avril 2018 à 06:45

3 réponses

Meilleure réponse

Vérifiez votre JSFiddle et avez trouvé le problème. Vous devez ajouter la classe suivante dans votre CSS.

form .form-row{margin-left: 0;}
1
Bhavin Solanki 13 avril 2018 à 05:20

Il semble que la façon dont vous ajoutez les nouvelles sections du formulaire lorsque vous cliquez sur «Ajouter un autre voyage» soit incorrecte. L'élément <div class="form-new" id="space"></div> que vous avez placé pour insérer la nouvelle section de formulaire se trouve à l'intérieur du <div class="form-row"></div> précédent. Vous ne devriez pas le placer là, mais juste après. Essayez de comprendre avec cet exemple.

Voilà ce que vous avez maintenant.

<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row">
   <div class="form-new" id="space"></div>
</div>

Essayez de le faire de cette façon,

<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-new" id="space"></div>
0
Aryan Twanju 13 avril 2018 à 04:24

Vous avez ceci dans votre css:

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

Ici margin-left: -5px déplace le contenu vers la gauche chaque fois que l'élément est créé, puis changez margin-left: -5px' to margin-left: 0px`.

Après avoir changé Css, votre css ressemblera à ceci

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: 0px;
}
1
Adern Nerk 13 avril 2018 à 04:19