In my Rails 5.2 application, I have implemented tabs using Bootstrap 4 as follows:
<div class="classic-tabs mx-2 mb-5">
<ul class="nav" id="myClassicTabShadow" role="tablist">
<li class="nav-item">
<a class="nav-link waves-light active show" id="tab-all" data-toggle="tab" href="#area-all" role="tab" aria-controls="area-all" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" id="tab-general" data-toggle="tab" href="#area-general" role="tab" aria-controls="area-general" aria-selected="true">General</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" id="tab-seo" data-toggle="tab" href="#area-seo" role="tab" aria-controls="area-seo" aria-selected="false">SEO</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" id="tab-sm" data-toggle="tab" href="#area-sm" role="tab" aria-controls="area-sm" aria-selected="false">Social Media</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" id="tab-templates" data-toggle="tab" href="#area-templates" role="tab" aria-controls="area-templates" aria-selected="false">Templates</a>
</li>
</ul>
<div class="tab-sm card" id="myClassicTabContentShadow">
<div class="tab-pane fade active show" id="area-all" role="tabpanel" aria-labelledby="tab-all">
<%= render partial: "resources/tab_interior", locals: { resources: @resources } %>
</div>
<div class="tab-pane fade" id="area-general" role="tabpanel" aria-labelledby="tab-general">
<%= render partial: "resources/tab_interior", locals: { resources: @general } %>
</div>
<div class="tab-pane fade" id="area-seo" role="tabpanel" aria-labelledby="tab-seo">
<%= render partial: "resources/tab_interior", locals: { resources: @seo } %>
</div>
<div class="tab-pane fade" id="area-sm" role="tabpanel" aria-labelledby="tab-sm">
<%= render partial: "resources/tab_interior", locals: { resources: @sm } %>
</div>
<div class="tab-pane fade" id="area-templates" role="tabpanel" aria-labelledby="tab-templates">
<%= render partial: "resources/tab_interior", locals: { resources: @templates } %>
</div>
</div>
</div> <!-- classic tabs -->
Despite the functionality of the tabs working correctly, there is an issue where there is empty space above the content when switching between tabs (except for the initial tab). The blank space corresponds to the height of the previous tab's content before displaying the current tab's content.
I have attempted to troubleshoot this by referring to resources like this and testing in a fiddle with simplified tab content. However, the problem persists consistently. This suggests that the error may not be originating from within the rendered partial.
If anyone can identify what may be causing this issue, I would greatly appreciate it.
UPDATE
To further investigate, I isolated the rendered code in a JS Fiddle where it appears to function properly. In contrast, when viewing the page with the rendered tabs (accessible here), the spacing issue persists. Below is the complete page content for reference:
<main class="container-fluid px-5">
<% if current_user && current_user.admin %>
<section class="text-right pt-2">
<%= link_to 'Add a New Resource', new_resource_path, class: "btn btn-blue btn-sm" %>
</section>
<% end %>
<heading class="text-center my-5">
<h1>Scary Tech Resources</h1>
</heading>
<!-- Classic tabs -->
<div class="classic-tabs mx-2 mb-5">
...
...
<script>
$(document).ready(function(){
$('.card-text').matchHeight();
})
</script>