0

Problem:

The Angular component for an accordion is perfectly working on localhost but not on an AWS Server.
If you click on one of the accordion-items it always jumps to the top of the side so you have to scroll down to the accordion again. On the localhost that is not the case.
What is the problem here?


Code

Everything is build with Tailwind CSS, we have no addtional styles or something.

<div class="accordion" id="cardetail_accordion">
  <div class="accordion-item bg-white border border-gray-200 text-xl">
    <h2 class="accordion-header mb-0" id="heading_1">
      <button class="
        accordion-button
        collapsed
        flex
        items-center
        w-full
        py-4
        px-5
        text-base text-gray-800 text-left
        bg-white
        border-0
        rounded-none
        transition
        focus:outline-none
      " type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1" aria-expanded="false"
        aria-controls="collapse_1">
        <div id="description" class="text-2xl">Beschreibung</div>
      </button>
    </h2>
    <div id="collapse_1" class="accordion-collapse collapse" aria-labelledby="heading_1"
      data-bs-parent="#cardetail_accordion">
      <div id="description" class="accordion-body py-4 px-5" >
          <p class="mt-3" *ngFor="let item of carDescription | keyvalue: unsorted">
            {{item.key}} {{item.value}}
          </p>
      </div>
    </div>
  </div>
  <div class="accordion-item bg-white border border-gray-200 text-xl">
    <h2 class="accordion-header mb-0" id="heading_2">
      <button class="
        accordion-button
        collapsed
        relative
        flex
        items-center
        w-full
        py-4
        px-5
        text-base text-gray-800 text-left
        bg-white
        border-0
        rounded-none
        transition
        focus:outline-none
      " type="button" data-bs-toggle="collapse" data-bs-target="#collapse_2" aria-expanded="false"
        aria-controls="collapse_2">
        <div class="text-2xl">Ausstattung</div>
      </button>
    </h2>
    <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
      data-bs-parent="#cardetail_accordion">
      <div id="equipment" class="accordion-body py-4 px-5">

        <div class="font-semibold">Serienausstattung:</div>
          <ul>
            <li class="mt-3" *ngFor="let item of serienausstattung"> {{item}} </li>
          </ul>
          <div class="mt-4 font-semibold">Sonderausstattung:</div>
          <ul>
            <li class="mt-3" *ngFor="let item of sonderausstattung"> {{item}} </li>
          </ul>
      </div>
    </div>
  </div>
 </div>


0 Answers0