The Bootstrap collapsible feature is causing elements to shift to the adjacent column

I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details.

However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the next column. On the other hand, expanding a collapsible in the right column results in a proper sliding animation but introduces additional space in the left column. To witness these two behaviors, please visit the following Plunker link and resize the screen until there are two rows of collapsibles: http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview

Below is the code snippet I am using:

<div class="panel panel-default store-wrapper">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
        {{x.name}}
      </a>
    </h4>
  </div>
  <div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
        <div class="col-xs-6 city">{{item.city}}:</div>
        <div class="col-xs-6 phone">
          <a ng-href="tel:{{item.number}}">{{item.number}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

My objective is to ensure that when a collapsible is expanded, only its corresponding column slides without affecting neighboring items or shifting onto the next row. Is it feasible to achieve this within Bootstrap's grid system?

Answer №1

If you're looking for a quick fix, here's one solution that might work for you.

All you need to do is insert

<div style="clear:both"></div>
after every two occurrences of the col-xs-12 div element. This should prevent any elements from getting pushed to the right unexpectedly.

You can take a look at an example of this in action here.

Keep in mind: Make sure to include the clear div after every N collapsible divs (where N corresponds to the number of columns).

Answer №2

Consider utilizing two separate columns for organizing your panels, like this:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-1">
              xname-1
            </a>
          </h4>
        </div>
       ...
</body>

UPD. I've updated my Plinker to remove unnecessary redundancies. Please note that my familiarity with Angular is limited.

http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview

<body ng-controller="MainCtrl">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
        <div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
          <div class="panel panel-default store-wrapper">
            <div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
              <h4 class="panel-title">
                  <a>
                    {{x.name}}
                  </a>
                </h4>
            </div>
            ...
</body>

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

What causes the CSS `resize` property to be inherited in Chrome browsers?

It was my understanding that elements do not inherit the resize property from their parent elements. However, I recently discovered that in Chromium they actually do: Here is a screenshot of Chromium's inspector: Check out this demo: http://jsfi ...

Table that can be scrolled through

Back in 2005, Stu Nichols shared a technique for creating a fixed header with scrolling rows in a table on this site. I'm curious if there are any newer methods or improvements to achieve the same effect, or is Stu's approach from 2005 still con ...

Error: Uncaught ReferenceError: d3 is undefined. The script is not properly referenced

Entering the world of web development, I usually find solutions on Stack Overflow. However, this time I'm facing a challenge. I am using Firefox 32 with Firebug as my debugger. The webpage I have locally runs with the following HTML Code <!DOCTYP ...

The Div elements are not displaying properly in the correct size on the responsive webpage

Looking to create a responsive design for a follow page. Although I've managed to make it work, adding a line at the top of each row is causing layout issues and the Box container is not displaying consistently in size. I attempted to set up a fiddl ...

Utilize $stateParams to dynamically generate a title

When I click a link to our 'count' page, I can pass a router parameter with the following code: $state.go('count', {targetName: object.name}) The router is set up to recognize this parameter in the URL: url: '/count/:targetName& ...

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

Error message: "Unfortunately, the requested page cannot be found when attempting to reload

After successfully deploying my Angular app to Firebase and being able to access the sign-in page without any issues, I encountered an error upon reloading the page: The file does not exist and there was no index.html found in the current directory or 404 ...

AngularJS applies the active class to the button within a button group

Currently, I am facing an issue with a button group that consists of buttons, some created using HTML and others generated through ng-repeat. The goal is to have an active class applied to the button when clicked so that it can be customized to indicate th ...

Switching Grid 1 and 2 in Bootstrap 4

Here is an example of what I need: Image: https://i.sstatic.net/EPCAq.png This is the code I am using: <div class="container"> <div class="row"> <div class="col-3"> <img src="image1.png" class="i ...

How to implement JavaScript alterations for ng-routed files in AngularJS without using a controller

Looking for assistance with applying JavaScript changes to ng-routed pages in AngularJS without using a controller. <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navba ...

How come the font size and div elements combine when I drag and drop the items?

Recently, I decided to create my own drag and drop game. The game is almost complete, but there's one issue. When I try to drop the items into the designated "Drop Items Here" area, their style changes abruptly to mimic the text. For example: Additi ...

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

Combining multiple template filters in ng-table with the power of CoffeeScript

Combining AngularJS, ng-table, and coffeescript has been quite a task for me. I've been trying to create a multiple template filter within coffeescript and pass it into my angularjs template. One of the challenges I'm facing is with a combined & ...

Exploring Ways to Retrieve Property Names in AngularJS JSON

I need help finding a way to use the property name as the table header in my code example below: <table> <th ng-repeat="auditorium in auditoriums"> {{ auditorium.NAME }} </th> <tbody ...

Strange circle border appearance in Android / Chrome device

Having an issue with my code on a Samsung Galaxy S5 in Chrome 54.0.2840.85, Android 6.01. You can view the problematic codepen here: http://codepen.io/johnsonjpj/pen/jVpreB The border displays correctly on Firefox and iPhones, but not on my device. Trou ...

Mastering the ng-submit directive for AngularJS

Having an issue with my form that submits a location to Google's Geocoder and updates the map with the lat/long. When using ng-click on the icon, it requires double clicking to work properly. And when using ng-submit on the form, it appends to the URL ...

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

Currently tackling a console warning related to MUI5/emotion (I believe) I have noticed that the pseudo class ":first-child" might pose potential risks during server-side rendering. It may be worth considering replacing it with ":first-of-type". I wonder ...

Angular Material failing to adapt to mobile devices

My website was created using Angular Material and looks great on desktop, but is completely broken and out of place when viewed on mobile devices. I'm thinking it might be because I haven't set the column size for each element properly. Any advic ...

Angular's DI (dependency injection) fosters seamless communication between various modules, allowing services and directives from different modules to interact

When needing to use a factory from another module, is it necessary to first add the dependency injection of the module to the current one and then afterward add the DI of the factory to the current factory? Or can the factory be added on its own without in ...

The image is not aligning properly within the navigation bar

I had some queries in mind: 1) How can I ensure that the circular profile image on the rightmost side fits within the header without overflowing? 2) How do I properly align the last three images at the bottom (in the "R" class), with adequate spacing bet ...