Twitter bootstrap - dropdown + modal box Opcje

[lukaskolista]

Witam. Mam nastepujacy problem z dropdown + modal box. Jezeli dropdown znajduje sie blisko modal-footer to niestety jest pod nim chowany. Czesciowym rozwiazaniem jest zrobienie dropdown rozwijanego w gore, jednak takie rozwiazanie srednio mi odpowiada. Wiecie moze jak zrobic, aby dropdown nakladal sie na stopke modal boxa? Problem zilustrowany na zdjeciu ponizej.


Bede bardzo wdzieczny za pomoc.

Ten post edytował lukaskolista 13.07.2012, 09:20:41

[rocktech.pl]

Witam.

Pobaw się tak:

[CSS] pobierz, plaintext 
.modal-body { 
    overflow-y: visible;
}
[CSS] pobierz, plaintext 

Od razu mówię wygląda brzydko. Będziesz musiał trochę nadpisać styl samego modal.

[sobol6803]

[CSS] pobierz, plaintext 
.dropdown {
    z-index: 999;
}
[CSS] pobierz, plaintext 

Może od tej strony?

[lukaskolista]

Niestety w takim przypadku dropdown dalej pozostaje w modal boxie (co prawda nachodzi na stopke), ale nie o taki efekt mi chodzilo. Chcialbym, aby w modal boxie nie bylo scrollbarow, a dropdown nakrywal modal box i z niech wychodzil.

sobol6803:
Probowalem z z-index i niestety nie daje nic

Ten post edytował lukaskolista 13.07.2012, 09:56:56

[sobol6803]

Ciężko mi po omacku powiedzieć, zarzuć linkiem, zobaczymy.

[lukaskolista]

[HTML] pobierz, plaintext 
<div class="container">
		<a href="#modal" data-toggle="modal" class="btn">Modal</a>
		<div class="modal hide" id="modal" style="width: 700px;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h3>Modal</h3>
			</div>
			<div class="modal-body">
				<div class="btn-group">
					<button data-toggle="dropdown" class="btn dropdown-toggle">Dropdown <span class="caret"></span></button>
					<ul class="dropdown-menu">
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
						<li><a href="#">Opcja</a></li>
					</ul>
				</div>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Zamknij</a>
			</div>
		</div>
    </div> <!-- /container -->
[HTML] pobierz, plaintext 

To kod modal boxa znajdujacy sie w kontenerze strony

[sobol6803]

Jeszcze style: .container .btn .modal hide #modal .modal-header .close .modal-body .btn-group .btn dropdown-toggle .caret .dropdown-menu .modal-footer

Najlepiej ten kod + style do tego kodu wrzuć na http://jsfiddle.net/, żeby można było zobaczyć razem na żywo.

[lukaskolista]

http://artykuly-online.pl/bootstrap/ wgralem tutaj demo

[matty7]

A jakbyś na chama dodał po rozwinięciu/odjął po zwinięciu wysokość? ;>

Ten post edytował matty7 14.07.2012, 11:21:14

[lukaskolista]

ale nie chodzi o wysokosc, chcialbym, aby rozwinieta lista nachodzila na stopke modal boxa tak, aby modal-body nie zmienialo wysokosci

[jahmbo]

na elemencie ".modal-body" masz "overflow-y:auto", a na "#modal" " overflow: auto;" oba przypadki by trzeba nadpisac " overflow: visible;"
na ten problem pomoze, nie wiem czy nie popsuje czegos innego

[wNogachSpisz]

Natrafiłem na ten sam problem.
Rozwiązałem trochę po łebkach w następujący sposób;

[JAVASCRIPT] pobierz, plaintext 
$('#myModal').on('show', function(){
	$('#myModal').css({
		'position': 'fixed',
		'top': ($(window).height() / 2) + ($('#myModal').height() / 2) + 50 +'px'
	})
})
[JAVASCRIPT] pobierz, plaintext 

// edit
Sorki, nie na temat.
Poniżej rozwiązanie:

[HTML] pobierz, plaintext 
<style>
 
.modal {
	overflow: visible ! important;
}
.modal-body {
	overflow: visible ! important;
}
 
</style>
[HTML] pobierz, plaintext 

Ten post edytował wNogachSpisz 1.08.2012, 12:42:53