Geek Answers Handbook

How to make this fontpicker display correctly inside boot modal w / tab

I use the fontpicker found here . I put it in modal and it worked fine. Now I have added the navigation tab inside the modal file and fontpicker is not showing correctly. (The button for the first modal is broken. The button for the second modal is an example of the same, but without tabbed navigation.)

I set style = "overflow-y: visible; max-height: 500px;" in both cases.

My violin

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <script> $(document).ready(function(){ $('select#fonts1').fontSelector({}); $('select#fonts2').fontSelector({}); }); </script> </head> <body> <!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">Fontpicker w/ modal and tabbed</a> <a href="#myModal2" role="button" class="btn" data-toggle="modal">Fontpicker w/out the tabbed navigation</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body" style="overflow-y:visible; max-height:500px;"> <ul class="nav nav-tabs"> <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane" style="overflow-y:visible; max-height:500px;"> <select id="fonts2"> <option value="Chelsea Market">Chelsea Market</option> <option value="Droid Serif" selected="selected">Droid Serif</option> <option value="Ruluko">Ruluko</option> <option value="Ruda">Ruda</option> <option value="Magra">Magra</option> <option value="Esteban">Esteban</option> <option value="Lora">Lora</option> <option value="Jura">Jura</option> </select> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <!-- Modal --> <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body" style="overflow-y:visible; max-height:500px;"> <select id="fonts1"> <option value="Chelsea Market">Chelsea Market</option> <option value="Droid Serif" selected="selected">Droid Serif</option> <option value="Ruluko">Ruluko</option> <option value="Ruda">Ruda</option> <option value="Magra">Magra</option> <option value="Esteban">Esteban</option> <option value="Lora">Lora</option> <option value="Jura">Jura</option> </select> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> </body> </html>
+6
source share
2 answers

Add this to your CSS:

 .tab-content { overflow: visible !important; }

Why does it work:

The jQuery UI .tab-content interface overflow property is currently set to auto. This means that scrollbars will be used instead of letting the content overflow from the dialog, so the drop-down menu is hidden from view (and you have to use tiny scrollbars to see them).

You need to override the jQuery UI CSS .tab-content overflow property with visible instead of auto to get the desired effect.

See the updated CSS script in the CSS field:

http://jsfiddle.net/samliew/kTXB7/3/

+3
source

The problem here is overflow:auto set in the .tab-content element.

Remove this overflow and it will work fine. However, be careful - this property allows you to use the vertical scroll bar when there is too much content for modal, so just use it depending on what you display in it.

+2
source

More articles:


All Articles