Twitter Bootstrap Accordion and Button Dropdown Overflow Issue

Twitter Bootstrap Accordion and button dropdown overflow issue

Original Idea

You were very close with your solution. This is it:

.accordion-body.in { overflow:visible; }

The .in class is added when opened, and thus only sets visibility when open.

See the example fiddle.

Update That May Help with Chrome Bug

The bug mg1075 notes below can be solved by a slight change to the code above, like so:

.accordion-body.in:hover { overflow:visible; }

This essentially prevents the overflow from occurring before the animation is complete. It works well, except that when you click your down button to open the dropdown, and then exit the .accordion-body it will crop off the dropdown again, but only until you mouseover the dropdown area again. Some might consider the behavior preferable.

See the fiddle with the update code.

Twitter Bootstrap button dropdown overflow issue when overflow properties are needed

I think you are probably looking for something like this http://jsfiddle.net/ssL1yydx/48/

#left-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 150px;
    background: #f1f1f1;
}
.btn-group {
    margin-left: 10px;
    margin-top: 30px;
}

#main-content{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 0;
}

.scroll {
 overflow-y: scroll;  
 max-height: 100%;
}

and added this wrapper class to the content that may be too long:

<div class="scroll">

Twitter Bootstrap: How to create a dropdown button with an accordion inside it?

You can insert an accordion inside a dropdown using :

• Bootstrap Dropdown component
• Bootstrap Collapse component

You'll need to add a few lines of JS to prevent Dropdown events to break Collapse ones.

Working example on Bootply

<div class="dropdown dropdown-accordion" data-accordion="#accordion">
  <a data-toggle="dropdown" href="#" class="btn btn-primary">Dropdown trigger <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li>
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Unit 1
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
              <a href="#">Item a</a><br>
              <a href="#">Item b</a>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Unit 2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              <a href="#">Item a</a><br>
              <a href="#">Item b</a><br>
              <a href="#">Item c</a>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

.dropdown-accordion .panel-heading {
  padding: 0;
}
.dropdown-accordion .panel-heading a {
  display: block;
  padding: 10px 15px;
}

// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
  var accordion = $(this).find($(this).data('accordion'));
  accordion.find('.panel-collapse.in').collapse('hide');
});

// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
  event.preventDefault();
  event.stopPropagation();
  $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
  $($(this).attr('href')).collapse('show');
})

Bootstrap: Dropdown on top of accordion

Its because there is overflow hidden added to your card class. Add this to your CSS

.accordion .card {
    overflow: inherit;
}

Twitter Bootstrap Button dropdown z-index layering issue

Try removing:

 .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

Bootstrap dropdown inside accordion

Adding style="overflow: visible" to the card div which contains the dropdown will solve the issue.

That is, for the bootply example replace <div class="card"> on line 8 with <div class="card" style="overflow: visible">.

Twitter Bootstrap nav Collapse drop-down menu is overlapping content?

For Centering logo, implement this css code to the referred class...

.container { position:relative; }    
.brand { text-align: center;    width: 97%;}

.navbar .btn-navbar {
    display: block;
    position: absolute;
    right: 0;
}

For Centering, the nav links,

.nav-collapse .nav > li > a {
    margin: 12px 0 !important;
    text-align: center;
}

And for the drop-down overlay issue, add this,

.nav-collapse { padding-top: 1em; }

---

Related Topics