title: Bootstrap Carousel Overflow:Hidden Breaks Dropup Button
body: <p>With Twitter Bootstrap, the .<code>carousel-inner</code> style is preset as:</p>
  
  <pre><code>.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  </code></pre>
  
  <p>such that <code>overflow: hidden;</code> causes a dropup button to be cut-off on the right-side:</p>
  
  <p><a href="http://imageshack.us/photo/my-images/197/dropup.png/" rel="nofollow">http://imageshack.us/photo/my-images/197/dropup.png/</a></p>
  
  <pre><code>&lt;div class="btn-group dropup"&gt;
    &lt;button class="btn"&gt;Cart&lt;/button&gt;
    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13)&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24)&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36)&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48)&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60)&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a javascript way to <em>change</em> the className <strong>before</strong> (instead of <code>on</code>) the <code>slide</code> event?</p>
  
  <p>In trying the following code, the button is fixed, but it causes the content of each slide to overflow during the slide transition..</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
  $('.carousel.slide').on('slide', function () {
  // change overflow to hidden, by changing class
  document.getElementById('carousel-inner').className = 'carousel-inner-fire';
  })
  
  $('.carousel.slide').on('slid', function () {
  // change overflow to visible, by changing class back
  document.getElementById('carousel-inner-fire').className = 'carousel-inner';
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>..where..</p>
  
  <pre><code>.carousel-inner-fire {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: visible;
  }
  </code></pre>
  
  <p>Also attempted..</p>
  
  <pre><code>function changeClass() {
          // change overflow to visible, by changing class
      document.getElementById("carousel-inner").className = "carousel-inner-visible";
  }
  
  window.onload = function() {
      document.getElementById("visible").addEventListener( 'click' , changeClass );
  }
  
  $.fn['unclick'] = function(){
      return this.unbind('click');
  };
  
  function changeClassback() {
          // change overflow to hidden, by changing class back
      document.getElementById("carousel-inner-visible").className = "carousel-inner";
  }
  
  window.onload = function() {
      document.getElementById("visible").addEventListener( 'unclick' , changeClassback );
  }
  
  
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .carousel-inner-visible {
    position: relative;
    width: 100%;
    overflow: visible;
  }
  
  
  &lt;button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"&gt;
  &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Carousel HTML:</p>
  
  <pre><code>  &lt;!-- Begin page content --&gt;
    &lt;div class="container"&gt;
      &lt;div class="page-header"&gt;
        &lt;h1&gt;Header/h1&gt;
      &lt;/div&gt;
      &lt;div id="myCarousel" class="carousel slide"&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="4"&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;!-- Carousel items --&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="active item"&gt; &lt;!-- Item 1-3 --&gt;
            &lt;div class="row-fluid"&gt;
              &lt;ul class="thumbnails"&gt;
                &lt;li class="span4"&gt; &lt;!-- Item 1 --&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;a href="#ccCookiesModal" data-toggle="modal"&gt;
                      &lt;img alt="300x200" src="img/chocolate_chip_cookies_thumb.jpeg" style="width: 300px; height: 200px;"&gt;&lt;/img&gt;
                    &lt;/a&gt;
                    &lt;div class="caption"&gt;
                      &lt;h3&gt;Cookies&lt;/h3&gt;
                      &lt;p&gt;Chocolate Chip&lt;/p&gt;
                      &lt;p&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn btn-primary"&gt;Buy&lt;/button&gt;
                          &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $13&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $24&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $36&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $48&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $60&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn"&gt;Cart&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $13&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $24&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $36&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $48&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $60&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class="span4"&gt; &lt;!-- Item 2 --&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;a href="#BlueberryMuffinsModal" data-toggle="modal"&gt;
                      &lt;img alt="300x200" src="img/blueberry_muffins_thumb.jpeg" style="width: 300px; height: 200px;"&gt;&lt;/img&gt;
                    &lt;/a&gt;
                    &lt;div class="caption"&gt;
                      &lt;h3&gt;Muffins&lt;/h3&gt;
                      &lt;p&gt;Blueberry&lt;p&gt;
                      &lt;p&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn btn-primary"&gt;Buy&lt;/button&gt;
                          &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $52&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $96&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $144&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $192&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $240&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn"&gt;Cart&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $52&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $96&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $144&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $192&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $240&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class="span4"&gt; &lt;!-- Item 3 --&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;a href="#ChocolateBrowniesModal" data-toggle="modal"&gt;
                      &lt;img alt="300x200" src="img/brownies_thumb.jpeg" style="width: 300px; height: 200px;"&gt;&lt;/img&gt;
                    &lt;/a&gt;
                    &lt;div class="caption"&gt;
                      &lt;h3&gt;Brownies&lt;/h3&gt;
                      &lt;p&gt;Medium Chocolate&lt;/p&gt;
                      &lt;p&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn btn-primary"&gt;Buy&lt;/button&gt;
                          &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $39&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $72&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $108&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $144&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $180&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn"&gt;Cart&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $39&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $72&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $108&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $144&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $180&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;   
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt; &lt;!-- Items 4-6 --&gt;
            &lt;div class="row-fluid"&gt;
              &lt;ul class="thumbnails"&gt;
                &lt;li class="span4"&gt; &lt;!-- Item 4 --&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;a href="#BananaBreadModal" data-toggle="modal"&gt;
                      &lt;img alt="300x200" src="img/banana_bread_thumb.jpeg" style="width: 300px; height: 200px;"&gt;&lt;/img&gt;
                    &lt;/a&gt;
                    &lt;div class="caption"&gt;
                      &lt;h3&gt;Banana Bread&lt;/h3&gt;
                      &lt;p&gt;With Chocolate Chips&lt;/p&gt;
                      &lt;p&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn btn-primary"&gt;Buy&lt;/button&gt;
                          &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;One Loaf (1) &amp;middot; $20&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Loaves (2) &amp;middot; $40&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Loaves (3) &amp;middot; $60&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Loaves (4) &amp;middot; $80&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Loaves (5) &amp;middot; $100&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn"&gt;Cart&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;One Loaf (1) &amp;middot; $20&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Loaves (2) &amp;middot; $40&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Loaves (3) &amp;middot; $60&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Loaves (4) &amp;middot; $80&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Loaves (5) &amp;middot; $80&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class="span4"&gt; &lt;!-- Item 5 --&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;a href="#RiceCrispiesModal" data-toggle="modal"&gt;
                      &lt;img alt="300x200" src="img/rice_crispies_thumb.jpeg" style="width: 300px; height: 200px;"&gt;&lt;/img&gt;
                    &lt;/a&gt;
                    &lt;div class="caption"&gt;
                      &lt;h3&gt;Rice Crispies&lt;/h3&gt;
                      &lt;p&gt;Marshmallow&lt;p&gt;
                      &lt;p&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn btn-primary"&gt;Buy&lt;/button&gt;
                          &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $26&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $48&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $72&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $96&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $120&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn"&gt;Cart&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $26&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $48&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $72&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $96&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $120&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class="span4"&gt; &lt;!-- Item 6 --&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;a href="#OatmealRaisinCookiesModal" data-toggle="modal"&gt;
                      &lt;img alt="300x200" src="img/oatmeal_raisin_cookies_thumb.jpeg" style="width: 300px; height: 200px;"&gt;&lt;/img&gt;
                    &lt;/a&gt;
                    &lt;div class="caption"&gt;
                      &lt;h3&gt;Oatmeal Cookies&lt;/h3&gt;
                      &lt;p&gt;With Raisins&lt;/p&gt;
                      &lt;p&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn btn-primary"&gt;Buy&lt;/button&gt;
                          &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $13&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $24&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $36&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $48&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $60&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group dropup"&gt;
                          &lt;button class="btn"&gt;Cart&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Baker's Dozen (13) &amp;middot; $13&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Two Dozen (24) &amp;middot; $24&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Three Dozen (36) &amp;middot; $36&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Four Dozen (48) &amp;middot; $48&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Five Dozen (60) &amp;middot; $60&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;   
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>ANY SOLUTION for maintaining the proper slide animation, while fixing the button, would be greatly appreciated..</p>
  
  <p>Thanks</p>
  
  <p>All the Best</p>