问题
With Twitter Bootstrap, the .carousel-inner style is preset as:
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
such that overflow: hidden; causes a dropup button to be cut-off on the right-side:
http://imageshack.us/photo/my-images/197/dropup.png/
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13)</a></li>
<li><a href="#">Two Dozen (24)</a></li>
<li><a href="#">Three Dozen (36)</a></li>
<li><a href="#">Four Dozen (48)</a></li>
<li><a href="#">Five Dozen (60)</a></li>
</ul>
</div>
Is there a javascript way to change the className before (instead of on) the slide event?
In trying the following code, the button is fixed, but it causes the content of each slide to overflow during the slide transition..
<script language="javascript">
$('.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';
})
</script>
..where..
.carousel-inner-fire {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: visible;
}
Also attempted..
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;
}
<button class="btn dropdown-toggle" data-toggle="dropdown" id="visible">
<span class="caret"></span>
</button>
Carousel HTML:
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Header/h1>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"> <!-- Item 1-3 -->
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4"> <!-- Item 1 -->
<div class="thumbnail">
<a href="#ccCookiesModal" data-toggle="modal">
<img alt="300x200" src="img/chocolate_chip_cookies_thumb.jpeg" style="width: 300px; height: 200px;"></img>
</a>
<div class="caption">
<h3>Cookies</h3>
<p>Chocolate Chip</p>
<p>
<div class="btn-group dropup">
<button class="btn btn-primary">Buy</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $60</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $60</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
<li class="span4"> <!-- Item 2 -->
<div class="thumbnail">
<a href="#BlueberryMuffinsModal" data-toggle="modal">
<img alt="300x200" src="img/blueberry_muffins_thumb.jpeg" style="width: 300px; height: 200px;"></img>
</a>
<div class="caption">
<h3>Muffins</h3>
<p>Blueberry<p>
<p>
<div class="btn-group dropup">
<button class="btn btn-primary">Buy</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $52</a></li>
<li><a href="#">Two Dozen (24) · $96</a></li>
<li><a href="#">Three Dozen (36) · $144</a></li>
<li><a href="#">Four Dozen (48) · $192</a></li>
<li><a href="#">Five Dozen (60) · $240</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $52</a></li>
<li><a href="#">Two Dozen (24) · $96</a></li>
<li><a href="#">Three Dozen (36) · $144</a></li>
<li><a href="#">Four Dozen (48) · $192</a></li>
<li><a href="#">Five Dozen (60) · $240</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
<li class="span4"> <!-- Item 3 -->
<div class="thumbnail">
<a href="#ChocolateBrowniesModal" data-toggle="modal">
<img alt="300x200" src="img/brownies_thumb.jpeg" style="width: 300px; height: 200px;"></img>
</a>
<div class="caption">
<h3>Brownies</h3>
<p>Medium Chocolate</p>
<p>
<div class="btn-group dropup">
<button class="btn btn-primary">Buy</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $39</a></li>
<li><a href="#">Two Dozen (24) · $72</a></li>
<li><a href="#">Three Dozen (36) · $108</a></li>
<li><a href="#">Four Dozen (48) · $144</a></li>
<li><a href="#">Five Dozen (60) · $180</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" id="visible">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $39</a></li>
<li><a href="#">Two Dozen (24) · $72</a></li>
<li><a href="#">Three Dozen (36) · $108</a></li>
<li><a href="#">Four Dozen (48) · $144</a></li>
<li><a href="#">Five Dozen (60) · $180</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
</div>
</div>
<div class="item"> <!-- Items 4-6 -->
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4"> <!-- Item 4 -->
<div class="thumbnail">
<a href="#BananaBreadModal" data-toggle="modal">
<img alt="300x200" src="img/banana_bread_thumb.jpeg" style="width: 300px; height: 200px;"></img>
</a>
<div class="caption">
<h3>Banana Bread</h3>
<p>With Chocolate Chips</p>
<p>
<div class="btn-group dropup">
<button class="btn btn-primary">Buy</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One Loaf (1) · $20</a></li>
<li><a href="#">Two Loaves (2) · $40</a></li>
<li><a href="#">Three Loaves (3) · $60</a></li>
<li><a href="#">Four Loaves (4) · $80</a></li>
<li><a href="#">Five Loaves (5) · $100</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One Loaf (1) · $20</a></li>
<li><a href="#">Two Loaves (2) · $40</a></li>
<li><a href="#">Three Loaves (3) · $60</a></li>
<li><a href="#">Four Loaves (4) · $80</a></li>
<li><a href="#">Five Loaves (5) · $80</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
<li class="span4"> <!-- Item 5 -->
<div class="thumbnail">
<a href="#RiceCrispiesModal" data-toggle="modal">
<img alt="300x200" src="img/rice_crispies_thumb.jpeg" style="width: 300px; height: 200px;"></img>
</a>
<div class="caption">
<h3>Rice Crispies</h3>
<p>Marshmallow<p>
<p>
<div class="btn-group dropup">
<button class="btn btn-primary">Buy</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $26</a></li>
<li><a href="#">Two Dozen (24) · $48</a></li>
<li><a href="#">Three Dozen (36) · $72</a></li>
<li><a href="#">Four Dozen (48) · $96</a></li>
<li><a href="#">Five Dozen (60) · $120</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $26</a></li>
<li><a href="#">Two Dozen (24) · $48</a></li>
<li><a href="#">Three Dozen (36) · $72</a></li>
<li><a href="#">Four Dozen (48) · $96</a></li>
<li><a href="#">Five Dozen (60) · $120</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
<li class="span4"> <!-- Item 6 -->
<div class="thumbnail">
<a href="#OatmealRaisinCookiesModal" data-toggle="modal">
<img alt="300x200" src="img/oatmeal_raisin_cookies_thumb.jpeg" style="width: 300px; height: 200px;"></img>
</a>
<div class="caption">
<h3>Oatmeal Cookies</h3>
<p>With Raisins</p>
<p>
<div class="btn-group dropup">
<button class="btn btn-primary">Buy</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $60</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Baker's Dozen (13) · $13</a></li>
<li><a href="#">Two Dozen (24) · $24</a></li>
<li><a href="#">Three Dozen (36) · $36</a></li>
<li><a href="#">Four Dozen (48) · $48</a></li>
<li><a href="#">Five Dozen (60) · $60</a></li>
</ul>
</div>
</p>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
ANY SOLUTION for maintaining the proper slide animation, while fixing the button, would be greatly appreciated..
Thanks
All the Best
回答1:
Instead of a complicated jQuery solution, you could add the 'pull-right' class to the 'dropup' menus that are getting cut-off so that they align to the right side of the drop-up button.
For example here is the 'Brownies' drop-up:
<div class="btn-group dropup">
<button class="btn">Cart</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" id="visible">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Baker's Dozen (13) · $39</a></li>
<li><a href="#">Two Dozen (24) · $72</a></li>
<li><a href="#">Three Dozen (36) · $108</a></li>
<li><a href="#">Four Dozen (48) · $144</a></li>
<li><a href="#">Five Dozen (60) · $180</a></li>
</ul>
</div>
Working Demo on Bootply
来源：https://stackoverflow.com/questions/16452041/bootstrap-carousel-overflowhidden-breaks-dropup-button