Menu
I am using the fontpicker found here. I put it inside a modal and it worked fine. Now, I've put tab navigation inside the modal and the fontpicker doesn't display properly. (The button for the first modal is the broken one. The button for second modal is an example of the same thing, but w/out the tabbed navigation.)
I've set style="overflow-y:visible; max-height:500px;" in both cases.
My Fiddle
<!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>
771
Add this to your CSS:
.tab-content {
overflow: visible !important;
}
Why this works:
Currently, the jQuery UI tabs .tab-content overflow property is set to auto. This means scrollbars will be used instead of allowing the content to overflow out of the dialog, which is why the dropdown menu is hidden from view (and you have to use the tiny scrollbars to actually see it).
You need to override the default jQuery UI's CSS .tab-content overflow property with visible in place of auto, to get the desired effect.
See the updated fiddle, with the CSS in the CSS box:
http://jsfiddle.net/samliew/kTXB7/3/
87
The problem here is overflow:auto set on .tab-content element.
Remove that overflow and it will work fine. Be careful though - that property enables the vertical scrollbar when there is too much content for a modal so just use it depending on what you are displaying in it.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
