I am currently working on a project for my company, and unfortunately, I cannot share the code as it is proprietary. However, I am encountering a problem where the page loads and automatically scrolls to the bottom. I have checked for any unclosed tags in the HTML, but everything seems to be in order.
To temporarily fix the issue, I am using window.scrollTo(0,0);, but there is still a slight scrolling flash on the screen.
Upon further investigation, I have found that the issue is related to the Bootstrap tabs in my code.
In my code, I have several sections similar to the one below. When I remove all the active classes from the "tab-pane active" areas, the scrolling stops, but the content is not displayed. This specific panel currently has only one tab but may have more in the future.
The panels with multiple tabs are not affected when the active class is applied.
Any ideas on how to display information in my single tabbed panels without adding the active class?
<div class="panel">
<p class="subtitle">Subtitle</p>
<ul class="nav nav-tabs">
<li class="active">
<a href="#aboutInfo" data-toggle="tab">Info</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="aboutInfo">
<div class="form-group">
<label for="aboutNavTitle">Page Title</label>
<input class="form-control" id="aboutNavTitle" type="text" value="About Us">
</div>
<label for="summernote1">Text</label>
<div class="summernote-container">
<div id="summernote1">
........
</div>
</div>
</div>
</div>
</div>