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>