Incapable de placer le bouton de soumission à l'intérieur de l'input dans Bootstrap 4.3.1

Question

Je travaille avec Bootstrap 4.3.1 et j'essaie de placer un bouton de soumission à l'intérieur d'un champ de saisie en utilisant la méthode ci-dessous et d'autres provenant de Stack Overflow.

Comme mon champ de saisie est rounded-pill, j'ai besoin de placer le bouton à l'intérieur du champ de saisie.

Comment puis-je placer le bouton à l'intérieur du champ de saisie ?

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");

              go

Answer 1

Ajouter ceci

.input-group-append {
    position: absolute;
    right: 0;
}
.x__p__address__x {
    padding-right: 40px;
}

Answer 2

Utilisez absolute pour positionner absolument le bouton à l'intérieur du champ input. Ajoutez également la propriété z-index pour vous assurer qu'il reste en haut du champ input lorsque vous le focussez.

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
body {
  margin: 20px;
}

.input-group {
  position: relative;
}

.form-control {
  padding-right: 47px;
}

.input-group-append {
  position: absolute;
  right: 15px;
  z-index: 10;
}

      go