Tips for maintaining the size of child elements in a Bootstrap collapse as it collapses

I'm currently working on a page that requires a collapsible element using Bootstrap horizontal collapse. Within this collapsible element, there is a table that seems to squish and increase in height as the collapse animation occurs. The transition appears choppy and not smooth, especially when the element expands back out since the rows do not resize until the collapse is fully expanded.

Is there a way to ensure the table remains consistent during the animation?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c130c11">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section class="item-statcard item-number w-25">
  <p class="">
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
  </p>
  <div class="">
    <div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
      <div class="card card-body statcard-body">
        <table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
          <tbody class="">
            <tr class="">
              <td colspan="2" class="">
                <h2 class="">Table</h2>
              </td>
            </tr>
            <tr class="">
              <td class="" width="40%">Dimensions (L-w-h)</td>
              <td class="">8.5 x 3.23 x 2.75 m</td>
            </tr>
            <tr class="">
              <td class="">Total weight</td>
              <td class="">28 tonnes</td>
            </tr>
            <tr class="">
              <td class="">Crew</td>
              <td class="">6</td>
            </tr>
            <tr class="">
              <td class="" valign="top">Propulsion</td>
              <td class="">diesel engine</td>
            </tr>
            <tr class="">
              <td class="">Speed</td>
              <td class="">50 km/h</td>
            </tr>
            <tr class="">
              <td class="">Range</td>
              <td class="">420 km</td>
            </tr>
            <tr class="">
              <td class="">Total production</td>
              <td class="">2020+</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c2738273a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

The solution involved maintaining the inline styling provided by Bootstrap, specifically style="width: 300px;" for the card-body.

Table
Dimensions (L-w-h) 8.5 x 3.23 x 2.75 m
Total weight 28 tonnes
Crew 6
Propulsion diesel engine
Speed 50 km/h
Range 420 km
Total production 2020+

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

Placing text over an image appears to be causing the navigation links to vanish - could it be a conflict with floating elements?

As a beginner, I'm facing a rather embarrassing situation here. Picture me banging my head on the table level of embarrassment... but let's give it a shot anyways. I've got a navigation bar and an image underneath (not behind). Both seem to ...

htmlcss

Creating consistent vertical lines in HTML tables by aligning them equally on both sides

Hello, I currently have two tables with different content and I am looking to align the vertical lines between them. You can view my code here. I want to ensure that the vertical line alignment between the two tables looks consistent. Here is my current C ...

csshtml

When the webpage is launched, the font styles specified in the CSS do not take effect and

As a beginning coder, I have encountered a small issue. In my HTML document, I attempted to set the font types of my paragraphs and headings to Arial using CSS. The code snippet is as follows: h4{ font-family arial san-serif; } However, when I run the c ...

css

Styling Your Email Signup Button with MailChimp

Dear Community, I need assistance with the CSS styling of MailChimp's "Submit" button. I have successfully changed the color and font using CSS, but now I am facing a challenge when trying to adjust the padding and margin of the button. Despite my ef ...

htmlcsswordpressmailchimpsubmit-button

Guide to displaying a local HTML file in CKEditor 4.3 using jQuery

Using CKEditor 4.3 on my HTML page, I aim to import content from a local HTML file and display it within the editor. (My apologies for any English errors as I am Brazilian :P) The jQuery code I have tried is as follows: $(document).ready(function(){ ...

javascriptjqueryhtmlckeditor

How can I increase the space between an icon and text in my design?

I am currently facing challenges with incorporating Bootstrap alongside CSS and am in the process of familiarizing myself with Bootstrap documentation using Flex. I am struggling to create more space as the text continues to closely follow the icon when I ...

htmlcssbootstrap-4

Wrapping is disabled for all elements within the container div that contains three additional div elements

I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...

csshtmltwitter-bootstrap

Organizing the website's files and extensions

Transitioning from programming desktop applications to websites can be overwhelming, especially when dealing with multiple languages and extensions like JavaScript, CSS, JSON, Bootstrap, Ajax, and PHP all at once. How do you effectively juggle these diff ...

javascripthtmlcssweb

Is there a way to postpone the mouseover event for vertical tabs?

While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...

javascriptjqueryhtmlcsstabs

Analyzing the current time against a user-inputted time using Javascript

Looking at this html and javascript code, the goal is to compare an input time with the current time. If the input time is less than 2 hours, "Less time" should be displayed in the label; if it's more than 2 hours, then "sufficient time" should appear ...

javascripthtmlfunctiontimecompare

Develop expandable objects containing a set size of items using HTML and CSS

I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...

htmlcssresponsive-design

Leveraging the p-steps module from PrimeNG for smaller screen sizes

I am facing an issue with resizing the p-steps component from PrimeNG to avoid overflow in smaller screen resolutions. The current code I am using is as follows: <div class="d-flex card mb-4"> <p-steps [model]="items" ...

htmlangularprimeng

What is the best way to populate missing days in an array up to the current date that do not already contain the "Present" element?

Consider the array below which contains attendance data for an employee (Retrieved from Mongo using Ajax): [{"_id":"5fcdcd49c3657d1e05b846f5","title":"Present","allDay":true,"start":"2020-11- ...

javascripthtmlarraysajaxmomentjs

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Can you help me with aligning two elements to the center and right edge using flex? I am trying to achieve a layout similar to the image. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX https://i.sstatic.net/cvmHX.png CSS Styles .flex{ display: flex; justify- ...

htmlcss

Assistance with Javascript Objects Using JSON and AJAX

Currently, I am utilizing Ajax to retrieve data from my Json file. A problem I am facing is that in one particular div of my html, I need to include both a heading and a paragraph. I attempted to create a property like so: "headingpara": "<h1> blah ...

javascripthtmljsonajax

Incorporate an image into a div element with the power of jQuery

As the user scrolls down the page, a sticky menu or floater bar appears. With the help of jQuery, I am able to apply the floater-bar class to the #menu-wrapper. My objective is to also insert an image inside an anchor tag at the same time the floater-bar ...

javascriptjqueryhtmlcss

Unveil the stunning left-to-right SVG animation

I have two SVG images and I want to create an animation with them. The animation consists of revealing the text "Full Screen" from left to right using the first SVG, and then covering the word "Screen" with the second SVG to reveal the entire second image. ...

htmlcsssvg

Using HTML5 canvas to draw circles with additional metadata stored in variables

I'm designing a seating chart that will indicate spots with circles and show a tooltip on mouseover with the person's first name, last name, and possibly other details. I plan to use Kinetic.JS for region/tooltip support based on the tutorials I& ...

javascripthtmlcanvasdraw

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: https://i.sstatic.net/Gl ...

javascripthtmlcssanimation

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss