<style> .ui-autocomplete { max-height: 300px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; } </style> <fieldset data-bind="visible: hasAirports"> <legend>Search (enter at least two characters of airport name or id)</legend> <input type="text" data-bind="autocomplete: { minLength: 2, source: airports, select: onSelect }" style="width: 100%;"> </fieldset> <div style="width=100%" data-bind="with: selectedAirport"> <div style="float: left;"> <div style="font-size: 20pt; font-weight: bold;" data-bind="text: id"></div> <div> <span style="font-size: 12pt; font-weight: normal;">Apt Elev </span> <span style="font-size: 14pt; font-weight: bold;" data-bind="text: elevation"></span> <span style="font-size: 14pt; font-weight: bold;">'</span> </div> <div> <span style="font-size: 12pt; font-weight: normal;" data-bind="text: arpFormatted"></span> </div> </div> <div style="float: right;"> <div> <span style="font-size: 20pt; font-weight: normal; float: right" data-bind="text: name"></span> </div> <div> <!-- <span style="font-size: 20pt; font-weight: bold;" data-bind="text: city"></span> <span style="font-size: 20pt; font-weight: bold;">, </span> <span style="font-size: 20pt; font-weight: bold;" data-bind="text: country"></span> --> </div> </div> </div> <div class="ui-helper-clearfix"></div> <fieldset data-bind="with: selectedAirport, visible: selectedAirport"> <legend>Communication</legend> <table style="width: 100%"> <tr data-bind="foreach: comm"> <td> <div data-bind="text: name" style="text-align: center"></div> <div data-bind="foreach: frequencies" style="text-align: center"> <span data-bind="text: $data"></span> </div> </td> </tr> </table> </fieldset> <fieldset data-bind="visible: selectedAirport"> <div id="phi-environment-position-map" style="height: 400px;"></div> </fieldset> <fieldset data-bind="with: selectedAirport, visible: selectedAirport"> <legend>Runway Information</legend> <table style="width: 100%" data-bind="foreach: runway"> <tr> <td><span data-bind="text: id"></span></td> <td><span data-bind="text: heading"></span>°</td> <td><span data-bind="text: surface"></span></td> <td><span data-bind="text: lengthFt"></span>ft <span data-bind="text: lengthM"></span>m</td> <td><span data-bind="text: widthFt"></span>ft <span data-bind="text: widthM"></span>m</td> <td><span data-bind="text: displacedThresholdFt"></span>ft <span data-bind="text: displacedThresholdM"></span>m</td> <td><span data-bind="text: stopwayFt"></span>ft <span data-bind="text: stopwayM"></span>m</td> </tr> </table> </fieldset>