Limiter la hauteur des segments d'accordéon réduits Bootstrap 5 Vue3

Question

Je construis une application Web en utilisant Vue3 et bootstrap 5. Mais je pense que cette question ne concerne que le bootstrap. Ce que je veux faire, c'est limiter la hauteur du segment d'accordéon réduit afin qu'il ne fasse pas tomber les autres segments trop bas lorsque son contenu est long.

Ce que j'ai essayé, c'est d'ajouter max-height et Overflow: auto à la classe .collapsing et j'ai ajouté "collapsing" à la classe de l'accordéon, mais l'accordéon défile jusqu'à cette hauteur et après une seconde passe à l'expansion complète. Dans le dossier d'amorçage node_modules, j'ai regardé _accordion.scss et changé "overflow-anchor" en auto, mais rien n'a changé.

.collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}

Dans ce fichier d'exemple, je viens de prendre l'exemple d'accordéon depuis bootstrap (sous "Flush"), donc mon fichier vue ressemble à ceci :

<template>
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingOne">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne"
          aria-expanded="false"
          aria-controls="flush-collapseOne"
        >
          Accordion Item #1
        </button>
      </h2>
      <div
        id="flush-collapseOne"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Placeholder<br />this must be long <br />this must be long <br />this
          must be long <br />this must be long <br />this must be long
          <br />this must be long <br />this must be long <br />this must be
          long <br />this must be long(thats what she said) <br />
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingTwo">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo"
          aria-expanded="false"
          aria-controls="flush-collapseTwo"
        >
          Accordion Item #2
        </button>
      </h2>
      <div
        id="flush-collapseTwo"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Placeholder content for this accordion, which is intended to
          demonstrate the <code>.accordion-flush</code> class. This is the
          second item's accordion body. Let's imagine this being filled with
          some actual content.
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "stackoverflowquestion",
};
</script>

<style>
.collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}
</style>

Des idées ? Merci

Answer 1

Je l'ai trouvé ! Il faut mettre la classe dans le corps de l'accordéon. Alors définissez d'abord une classe, par exemple

.restrict-collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}

Alors appelez-le entre les mêmes parenthèses que le corps de l'accordéon