Jinnie Jinnie - 2 months ago 7
CSS Question

How to remove unsightly paddings around collapsible columns / accordion

I have 6 columns in one row that are part of a panel group. When one column opens the other previously opened column closes. However, the layout has these unsightly paddings or borders around and the columns appear off-grid too. I tried to look for solutions but no luck.

Here is the output of the problem:

enter image description here

What I need to have:

enter image description here

Here is my problem code:

<div class="container">
<div class="row">
<div class="panel-group" id="Heyaccordion">
<div class="panel panel-default col-sm-2">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTopOneMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-piggy-bank"></span>&#160;&#160;&#160;PC Inventory<br/> </a> </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopOneMore">
<div class="panel-body">
<span class="glyphicon glyphicon-ok"></span>
<a href="#">&#160;&#160;&#160;Somewhere </a> </div>
</div>
</div>
<div class="panel panel-default col-sm-2">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTopTwoMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopTwoMore">
<div class="panel-body">
<span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
</div>
</div>
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTopThreeMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopThreeMore">
<div class="panel-body">
<span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
</div>
</div>
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTopFourMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopFourMore">
<div class="panel-body">
<span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> google </a> </div>
</div>
</div>
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTopFiveMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopFiveMore">
<div class="panel-body">
<span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
</div>
</div>
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTopSixMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopSixMore">
<div class="panel-body">
<span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google</a> </div>
</div>
</div>
</div>
</div>
</div>

Answer

if you add the following it will fix the issue shown in the pictures:

#Heyaccordion .panel {
     margin-top: 5px;
     padding: 0;
     margin-left: 10px;
     margin-right: 10px;
     max-width: 164px;
}

Also is there a reason you are suing .col-sm-2 on the first two panels?

Comments