1
votes

La largeur de la zone de texte sort du mode bootstrap

En cliquant sur le bouton, j'affiche un modal bootstrap. A l'intérieur du corps modal, j'ai gardé quelques boutons et une zone de texte. Lorsque je règle la largeur des boutons et de la zone de texte à 100%, cela sort du conteneur modal. Comment réparer la même chose pour qu'elle couvre toujours le conteneur modal dans tous les appareils (mobile, ordinateur de bureau, tablette, etc.)?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog fdbckmodal">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="display:block !important; text-align:center;">
                    <button type="button" class="close" data-dismiss="modal">Ã—</button>
                    <h4 class="modal-title">Feedback</h4>
                </div>
                <div class="modal-body feedbackModal">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <p>Sorry to know this wasn't the response you expected. Help us understand what went wrong</p>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">The answer is not relevant</button>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">The answer is wrong</button>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">Others</button>
                            </div>
                            <div class="col-12">
                                <textarea class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

.fdbckmodal .btn {
    outline: 0 !important;
    box-shadow: none !important;
    width: 100%;
}

.feedbackModal .btn-primary {
    cursor: pointer;
    border-color: #3296d2;
    !important;
    background: rgb(255, 255, 255) !important;
    color: #000000;
    !important;
}

.feedbackModal .col-12 {
    margin-top: 5px;
}

.feedbackModal .btn:hover {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.feedbackModal .btn:focus {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
}

.feedbackOthers {
    height: 60px;
    padding: 5px;
    border-radius: 4px;
    resize: none;
}

css twitter-bootstrap

1 commentaires

définir la largeur à 50%

4 Réponses :

0
votes

Essayez de définir une largeur maximale sur une classe parente.

.model-body .container {
  max-width: 400px;
}

ou essayez également d'ajouter la classe btn btn-block à votre balise de bouton html

0 commentaires

0
votes

Il suffit de changer container en container-fluid;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog fdbckmodal">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="display:block !important; text-align:center;">
                    <button type="button" class="close" data-dismiss="modal">Ã—</button>
                    <h4 class="modal-title">Feedback</h4>
                </div>
                <div class="modal-body feedbackModal">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12">
                                <p>Sorry to know this wasn't the response you expected. Help us understand what went wrong</p>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">The answer is not relevant</button>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">The answer is wrong</button>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">Others</button>
                            </div>
                            <div class="col-12">
                                <textarea class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

.fdbckmodal .btn {
    outline: 0 !important;
    box-shadow: none !important;
    width: 100%;
}

.feedbackModal .btn-primary {
    cursor: pointer;
    border-color: #3296d2;
    !important; /* Does nothing */
    background: rgb(255, 255, 255) !important;
    color: #000000;
    !important;/* Does nothing */
}

.feedbackModal .col-12 {
    margin-top: 5px;
}

.feedbackModal .btn:hover {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.feedbackModal .btn:focus {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
}

.feedbackOthers {
    height: 60px;
    padding: 5px;
    border-radius: 4px;
    resize: none;
}

0 commentaires

0
votes

Pouvez-vous utiliser Bootstrap 4 au lieu de 3? Si tel est le cas, votre code fonctionnera tel quel. Voici votre code avec le CDN Bootstrap 4.

.modal-content .container {
    width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog fdbckmodal">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="display:block !important; text-align:center;">
          <button type="button" class="close" data-dismiss="modal">Ã—</button>
          <h4 class="modal-title">Feedback</h4>
        </div>
        <div class="modal-body feedbackModal">
          <div class="container">
            <div class="row">
              <div class="col-12">
                <p>Sorry to know this wasn't the response you expected. Help us understand what went wrong</p>
              </div>
              <div class="col-12">
                <button type="button" class="btn btn-primary">The answer is not relevant</button>
              </div>
              <div class="col-12">
                <button type="button" class="btn btn-primary">The answer is wrong</button>
              </div>
              <div class="col-12">
                <button type="button" class="btn btn-primary">Others</button>
              </div>
              <div class="col-12">
                <textarea class="form-control"></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Si vous ne pouvez pas utiliser Bootstrap 4, ajoutez simplement l'extrait suivant à votre css:

.fdbckmodal .btn {
  outline: 0 !important;
  box-shadow: none !important;
  width: 100%;
}

.feedbackModal .btn-primary {
  cursor: pointer;
  border-color: #3296d2;
  !important;
  background: rgb(255, 255, 255) !important;
  color: #000000;
  !important;
}

.feedbackModal .col-12 {
  margin-top: 5px;
}

.feedbackModal .btn:hover {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.feedbackModal .btn:focus {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.modal-body {
  position: relative;
  max-height: 400px;
  padding: 15px;
}

.feedbackOthers {
  height: 60px;
  padding: 5px;
  border-radius: 4px;
  resize: none;
}

0 commentaires

0
votes

Vous avez un conteneur à l'intérieur du corps modal. La largeur de ce conteneur est définie par bootstrap et dépend de la taille de la zone d'affichage. Peu importe la taille de votre modal réel. Ainsi, le conteneur est plus large que votre modal dans certains cas.

La zone de texte et les boutons sont des enfants du conteneur. Donc, ils deviennent 100% de la largeur du conteneur, pas celle du modal.

Vous devez limiter la largeur de votre conteneur d'une manière ou d'une autre:

.modal-body .container {
    max-width: 100%;
}

0 commentaires