"Creating a Sleek Design: How Bootstrap 4 Tabs Use Fade Effect to Optimize Space for Multiple

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>

Answer №1

#myClassicTabContentShadow .fade:not(.show) {
  position: fixed;
  width: 100%;
}
#myClassicTabContentShadow .fade.show {
  min-height: 450px;
}

...solves the issue at hand.

The key fix lies in using position: fixed. Additional tweaks were made to enhance the transition effects.

Primarily, conflicts between the .card and .tab-sm styles led to this dilemma. Separating them into distinct elements (e.g. .tab-sm > .card) could also resolve the matter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery execCommand feature fails to generate a pop-up when used within the contenteditable attribute of an HTML tag

Trying to implement an inline text editor using the jQuery execCommand function. Below is a snippet of my source code: /*******************************************************************/ /********** Click: inner of contenteditable text-editor div *** ...

What is the best way to transform an array of arrays into an array of objects using AngularJS?

Here is some code I am working on: $scope.students=[]; $scope.students[[object Object][object Object]] [0]{"id":"101","name":"one","marks":"67"} [1]{"id":"102","name":"two","marks":"89"} I would like to reformat it into the ...

Node.js and Express constantly face the challenge of Mongoose connecting and disconnecting abruptly

I have been running an Express (Node.js) app connected to MongoDB using Mongoose for a while now. Everything was working smoothly until recently, when it started acting up. It appears that the server is establishing a connection with MongoDB only to disco ...

Activate a button by simulating a click event through a shortcut key with the help of a

I have incorporated the hotkeys plugin to enable shortcut functionality on my website. Currently, I am looking for a way to automatically trigger a button click when any shortcuts are pressed. hotkeys.add({ combo: 'alt+1', callback: function (da ...

Express npm dependency fails to start globally

I have recently reinstalled my operating system from Windows 8.1 to Windows 8.1, and I have been using npm for quite some time. Previously, it was working fine as mentioned here. After the reinstallation, I tried installing npm i -g express, but it does n ...

Using Moment JS to Retrieve Month Names from the Current Year Starting from the Current Month and Beyond

In my quest for knowledge, I desire to ascertain the name of the current month and also list out the remaining months in the current year that have yet to pass. As an illustration, if the current month is July and we are in the year 2021, the months of Aug ...

The submission of the form is not functioning correctly when triggered by JavaScript using a button

My website was designed using a CSS/HTML framework that has been seamlessly integrated into an ASP.NET site. Within a ContentPlaceHolder, I have implemented a basic login form. The unique aspect is that I am utilizing the onclick event of an image to subm ...

The Angular model finally refreshes its values after a console.log() is executed

UPDATE After further investigation, I discovered that the issue was not related to Angular itself, but rather a mistake in the update function within the node server controller. I have provided the fix below for reference, and decided to keep this questio ...

Preventing direct URL access with Angular redirects after refreshing the page

My website allows users to manage a list of users, with editing capabilities that redirect them to the /edit-user page where form information is preloaded. However, when users refresh the page with F5, the form reloads without the preloaded information. I ...

I've come across some strange JavaScript code while tinkering with an Express/Socket.io application

I am currently working on developing an app similar to SCADA using Brian Ford's amazing https://github.com/btford/angular-socket-io-seed as a starting point. However, I have encountered some JavaScript code that I find quite confusing. I have tried se ...

Is the window frozen while Ajax processes the request?

When I make an ajax request that may take a significant amount of time to process on the server-side, I want to display a loading image during the request. However, the loading image is not showing up while the ajax request is processing. var ref = create ...

React custom slider component is failing to meet expectations

I've been working on enhancing my React skills and building my portfolio. Instead of using a library, I opted to create a custom slider using the code below: const ProjectWrapper = styled.div` .container { transform: translateX(-$ ...

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

I have been tasked with binding a value to one model based on the content of another model when it contains a string that starts with "https". For instance, there are two text fields each associated with a different model. <input type="text" ng-model= ...

If there is only one remaining option after applying the angular filter, automatically choose that option

Currently, I have a scenario where there are two select boxes. The selection in one box acts as a filter for the other box. In some cases, this filter results in only one option left in the list. I am exploring options to automatically select that lone opt ...

Retrieve all the data enclosed within the span tags

Assuming there are two instances of tbody on a given page, is it possible to retrieve all the data enclosed within the spans of the second occurrence of tbody as shown below? The unique id's (id=id1, id=id2, etc) can only be found once throughout the ...

The discord.js TypeScript is throwing an error stating that the 'index.ts' file is missing when trying to run 'ts-node index.ts'

I have been working on creating a discord bot using discord.js and TypeScript. However, when I attempt to start the bot by running 'ts-node index.ts', I encounter the following error: Error: Cannot find module 'node:events' Require stac ...

The function to set the state in React is malfunctioning

I'm currently in the process of developing a website where I utilize fetch to retrieve information and display it to the user. Initially, I opted to save this data in a state variable, but for some reason, it's not functioning as expected. Upon ...

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Struggling with disabling all checkboxes in a PHP form when the NONE option is selected. <h5>HEALTH OF STUDENT</h5> <p>Any physical, emotional, or other difficulties to be aware of?</p> <table> <td>Hearing ...

Does the triple equal operator in JavaScript first compare the type of the value?

When using the triple equal operator, it not only measures the value but also the type. I am curious about the order in which it compares the value and returns false if they do not match, or vice versa. ...

Tracking the Height of Hidden Elements During Page Resizing

I am currently attempting to determine the height of a hidden element after the page has been resized. More details can be found at this link: The script is able to successfully log the height upon page load, but when the page is resized, it goes back to ...