Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Twitter bootstrap - dropdown + modal box
lukaskolista
post
Post #1





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----


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.
(IMG:http://artykuly-online.pl/dropdown.png)

Bede bardzo wdzieczny za pomoc.

Ten post edytował lukaskolista 13.07.2012, 09:20:41
Go to the top of the page
+Quote Post
rocktech.pl
post
Post #2





Grupa: Zarejestrowani
Postów: 587
Pomógł: 131
Dołączył: 8.02.2010

Ostrzeżenie: (0%)
-----


Witam.

Pobaw się tak:

  1. .modal-body {
  2. overflow-y: visible;
  3. }


Od razu mówię wygląda brzydko. Będziesz musiał trochę nadpisać styl samego modal.
Go to the top of the page
+Quote Post
sobol6803
post
Post #3





Grupa: Zarejestrowani
Postów: 115
Pomógł: 13
Dołączył: 19.06.2011
Skąd: Ruda Śląska

Ostrzeżenie: (0%)
-----


  1. .dropdown {
  2. z-index: 999;
  3. }


Może od tej strony?
Go to the top of the page
+Quote Post
lukaskolista
post
Post #4





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
sobol6803
post
Post #5





Grupa: Zarejestrowani
Postów: 115
Pomógł: 13
Dołączył: 19.06.2011
Skąd: Ruda Śląska

Ostrzeżenie: (0%)
-----


Ciężko mi po omacku powiedzieć, zarzuć linkiem, zobaczymy. (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
lukaskolista
post
Post #6





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----


  1. <div class="container">
  2. <a href="#modal" data-toggle="modal" class="btn">Modal</a>
  3. <div class="modal hide" id="modal" style="width: 700px;">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal">×</button>
  6. <h3>Modal</h3>
  7. </div>
  8. <div class="modal-body">
  9. <div class="btn-group">
  10. <button data-toggle="dropdown" class="btn dropdown-toggle">Dropdown <span class="caret"></span></button>
  11. <ul class="dropdown-menu">
  12. <li><a href="#">Opcja</a></li>
  13. <li><a href="#">Opcja</a></li>
  14. <li><a href="#">Opcja</a></li>
  15. <li><a href="#">Opcja</a></li>
  16. <li><a href="#">Opcja</a></li>
  17. <li><a href="#">Opcja</a></li>
  18. <li><a href="#">Opcja</a></li>
  19. <li><a href="#">Opcja</a></li>
  20. <li><a href="#">Opcja</a></li>
  21. <li><a href="#">Opcja</a></li>
  22. </ul>
  23. </div>
  24. </div>
  25. <div class="modal-footer">
  26. <a href="#" class="btn" data-dismiss="modal">Zamknij</a>
  27. </div>
  28. </div>
  29. </div> <!-- /container -->

To kod modal boxa znajdujacy sie w kontenerze strony
Go to the top of the page
+Quote Post
sobol6803
post
Post #7





Grupa: Zarejestrowani
Postów: 115
Pomógł: 13
Dołączył: 19.06.2011
Skąd: Ruda Śląska

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
lukaskolista
post
Post #8





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----


http://artykuly-online.pl/bootstrap/ wgralem tutaj demo
Go to the top of the page
+Quote Post
matty7
post
Post #9





Grupa: Zarejestrowani
Postów: 85
Pomógł: 0
Dołączył: 23.12.2006
Skąd: Będzin / Kraków

Ostrzeżenie: (0%)
-----


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

Ten post edytował matty7 14.07.2012, 11:21:14
Go to the top of the page
+Quote Post
lukaskolista
post
Post #10





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----


ale nie chodzi o wysokosc, chcialbym, aby rozwinieta lista nachodzila na stopke modal boxa tak, aby modal-body nie zmienialo wysokosci
Go to the top of the page
+Quote Post
jahmbo
post
Post #11





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 23.07.2012

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
wNogachSpisz
post
Post #12





Grupa: Zarejestrowani
Postów: 1 233
Pomógł: 87
Dołączył: 6.03.2009

Ostrzeżenie: (40%)
XX---


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

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

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

  1.  
  2. .modal {
  3. overflow: visible ! important;
  4. }
  5. .modal-body {
  6. overflow: visible ! important;
  7. }
  8.  


Ten post edytował wNogachSpisz 1.08.2012, 12:42:53
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 25.08.2025 - 07:44