How to prevent Bootstrap panel collapse from creating gaps

I am currently working on a layout with 2 columns, each containing 2 panels. Both of these columns are set to be 50% wide (col-md-6) with collapsible panels inside. The collapsing functionality works just fine, but the issue arises when I expand a panel. When this happens, the bottom left div moves down too much, creating a large gap between panel 1 and 3.

Expanding panel 1 results in an unnecessary amount of whitespace between panels 1 and 3, which is problematic. I have been unable to find a solution to adjust this spacing appropriately.

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

Take a look at this Bootply example

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

What you see may not be the reality of what is happening. In panel three, there is a shift to the right, causing panel 4 to move to a new line.

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

The issue lies in missing row divs between your container and col-sm-6, which disrupts the column layout.

Check out the DEMO for further clarification.

<div class="container">
  <div class="row"> <!--ADD ROW-->
    <div class="col-sm-6">
      <div class="panel panel-primary">
          1
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          2
      </div>
    </div>
  </div><!--END ROW-->

  <div class="row"><!--ADD ROW-->
    <div class="col-sm-6">
      <div class="panel panel-primary">
          3
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          4
      </div>
    </div>
  </div><!--END ROW-->
</div>

Alternatively, this layout might solve the problem:

View the DEMO here.

<div class="container">
  <div class="row"> 
    <div class="col-sm-6">
      <div class="panel panel-primary">
          1
      </div>
      <div class="panel panel-primary">
          2
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          3
      </div>
      <div class="panel panel-primary">
          4
      </div>
    </div>
  </div>
</div>

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

There is a mismatch in the host name: please consider using a domain name (e.g., https://myname.myorg.com) instead of https://localhost

My current setup involves an HTML application that sends an AJAX request to a Qt C++ HTTP Server running on my local computer, hosted at "https://localhost:8081". However, I am facing an issue with a host name mismatch causing the AJAX request to fail. Is ...

htmlajaxqtsslhostname

Implement feature to toggle function upon clicking radio buttons using bootstrap and angular 5

Currently, I am utilizing Angular 6 and Bootstrap 4. Within my project, there exists a Bootstrap button group: <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary"> <input type="radio" ...

angulartwitter-bootstrapbootstrap-4

Enable the toggle effect in jQuery to smoothly animate the button downward when clicked

Have you ever wondered about the magical movement of a button when it is clicked? Instead of staying in place, the button gracefully glides down and returns to its original position. To see this enchanting effect in action, check out the HTML, CSS, and jQu ...

jqueryformsbuttontoggle

Troubleshooting why content set to a <div> element with JavaScript / jQuery is not persisting after a

This is the current code snippet I am working with: <asp:Button ID="btnSave" runat="server" OnClick="Save" CssClass="StylizedButton" resourcekey="btnSave" /> <div id="lbltot"></div> Below is the JavaScript portion of the code: $(do ...

javascriptjqueryasp.net

How can I import HTML files using PHP?

Currently, I have a file structured like this: <?php if(some condition) { //Access Denied } else { echo "<html>My HTML Code</html>"; } ?> However, I am looking to optimize my PHP file by simplifying it with the following structu ...

phphtml

Unable to transmit HTML emails

I've been encountering an issue while trying to send HTML emails using Gmail SMTP from CI. It seems that my emails are being rejected if they contain any tables. Interestingly, there is no error message provided; the emails simply do not show up in my ...

phphtmlemailcodeigniter

By employing timeUpdate in conjunction with currentTime

I am looking to utilize the timeUpdate and currentTime functionalities to display or hide a div at a specific time during video playback. I have been able to make it work, but it seems to be showing and hiding every second I specify. Below is the code I ...

javascripthtmlcss

How can I retrieve the HTML content as well as the text from a textarea element using jQuery?

Can someone assist me with a cross-browser solution using jQuery to return the HTML tag as well as the text inside when working with a textarea element? var elemField = $('<textarea></textarea>'); elemField.val('bla bla this is ...

jquery

Saving a form with repeater fields using Ajax

I created a dynamic form in HTML that allows users to add multiple members as needed. The member details are stored within a div like this: <div class="form-group form-group-100 clearfix"> <label>Name:</label> <input type="te ...

jqueryajaxwordpressformsrepeater

Is there a way to retrieve two separate route details using jQuery simultaneously?

Clicking the checkbox should display the Full Name: input type="text" id="demonum" size="05"> <button type="button" onclick="load_doc()">click</button><br><br> <input type="checkbox" id ="check" > The r ...

javascriptjquerynode.js

Retrieving a variable value from an AJAX call for external use

Looking for a solution to pass the generated JSON response from an ASMX web service accessed via AJAX to an outside variable in another function. Below is the code snippet for reference: function setJsonSer() { var strWsUrl = &apo ...

javascriptjqueryajaxjson

substitute bullet point list item with new element

Assuming I have a list: <ul class="ul-1"> <li class="li-1">xx -1</li> <li class="li-2">xx -2</li> <li class="li-3">xx -3</li> </ul> Then I store it as: var list = $('.ul-1').html(); In ...

javascripthtmljquery

Responsive Bootstrap container with flexible column layouts

Forgive me if this sounds silly, but I'm struggling to find an answer for what I want to accomplish... I'm attempting to create a responsive container div (similar to a column inside a row). For example, I would like to achieve the following ef ...

csstwitter-bootstrapreact-bootstrapbootstrap-5

Guide on adjusting the language settings for notifications in chosen.js?

Is it possible to customize the error message that appears in chosen.js when an unavailable option is typed into the multiple select box, which currently says 'No results match "query"'? ...

javascriptjquerylocalizationjquery-chosen

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

htmlcss

I'm missing out on that gray background

input your code hereI am working with the following html/php code snippet: <div class="footerbottom"> <span class="footermenuitem"> <span class="footermenutitle">PRODUCTS</span> <?php $menu = menu_navigation_links('menu-pro ...

phphtmlcsscss-floatbackground-color

The slickslider is failing to function properly with dynamic content

Hello everyone! I have encountered a problem while trying to create a slider using dynamic content loaded via ajax. I've created an example on jsFiddle to demonstrate the issue. Even though some elements and classes are added to the DOM by slick, the ...

javascriptjqueryslick.js

What is the most effective way to eliminate the title from any tag?

How can I remove the title from only page-1 while using the same structure for both page-1 and page-2? I need to keep the same code structure for both pages, but I want to remove the title that is shown in the hover state. Any help is appreciated. Thanks i ...

htmlcss

Angular and Bootstrap combined to create a versatile navigation bar with a collapsible sidebar feature

Currently, I am in the process of developing a progressive web app using Angular and Bootstrap. One of the main challenges I am facing is implementing a navbar that not only looks great on desktop but also on mobile devices. So far, I am satisfied with my ...

htmlcssangularbootstrap-4navbar

Passing a jQuery dialog variable for use in a php function using ajax

I am struggling to successfully pass variables from jQuery to a PHP function using AJAX. I have included the necessary HTML and script, but I'm confused as to whether the PHP file specified in the "url:" parameter should be external or can it be follo ...

javascriptphpjqueryhtmlajax