JSFiddle - React, Tailwind, and code Playground

by Sam Liew

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://lindekleiv.bitbucket.org/fontselector/jquery.ui.fontSelector.css" rel="stylesheet"/>
<script src="http://lindekleiv.bitbucket.org/fontselector/jquery.ui.fontSelector.min.js" type="text/javascript"></script>
    <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>
              ...

CSS

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