2015-09-08 4 views
5

Mam stronę HTML o numerze http://codepen.io/liang179/pen/WQvERK zawierającą znacznik powiązany z dużą datalistą. Wyświetla się w chrome ma przepełnienie.Jest nadal dane z ekranu.But jest w porządku w firefox z paska przewijania. Co mogę zrobić, aby wyświetlać się w chromie z paskiem przewijania, tak jak w firefoxie. Poniżej znajduje się kod. Przepełnienie znacznika HTML5 <input> przy użyciu datalisty w chrome

$('#trigger').click(function(){ 
 
\t \t $class = "animated infinite " + $('#type').val(); 
 
\t \t $('#target').removeClass().addClass($class); 
 
});
<div style="text-align: center;"> 
 
\t <div id='target' style="margin: 200px auto; width: 200px; height:200px; background-color:#663399"></div> 
 
\t <div> 
 
\t \t <input id="type" list="classes"> 
 
\t \t <datalist id="classes"> 
 
\t \t \t <option value="bounce"> 
 
\t \t \t <option value="flash"> 
 
\t \t \t <option value="pulse"> 
 
\t \t \t <option value="rubberBand"> 
 
\t \t \t <option value="shake"> 
 
\t \t \t <option value="swing"> 
 
\t \t \t <option value="tada"> 
 
\t \t \t <option value="wobble"> 
 
\t \t \t <option value="jello"> 
 
\t \t \t <option value="bounceIn"> 
 
\t \t \t <option value="bounceInDown"> 
 
\t \t \t <option value="bounceInLeft"> 
 
\t \t \t <option value="bounceInRight"> 
 
\t \t \t <option value="bounceInUp"> 
 
\t \t \t <option value="bounceOut"> 
 
\t \t \t <option value="bounceOutDown"> 
 
\t \t \t <option value="bounceOutLeft"> 
 
\t \t \t <option value="bounceOutRight"> 
 
\t \t \t <option value="bounceOutUp"> 
 
\t \t \t <option value="fadeIn"> 
 
\t \t \t <option value="fadeInDown"> 
 
\t \t \t <option value="fadeInDownBig"> 
 
\t \t \t <option value="fadeInLeft"> 
 
\t \t \t <option value="fadeInLeftBig"> 
 
\t \t \t <option value="fadeInRight"> 
 
\t \t \t <option value="fadeInRightBig"> 
 
\t \t \t <option value="fadeInUp"> 
 
\t \t \t <option value="fadeInUpBig"> 
 
\t \t \t <option value="fadeOut"> 
 
\t \t \t <option value="fadeOutDown"> 
 
\t \t \t <option value="fadeOutDownBig"> 
 
\t \t \t <option value="fadeOutLeft"> 
 
\t \t \t <option value="fadeOutLeftBig"> 
 
\t \t \t <option value="fadeOutRight"> 
 
\t \t \t <option value="fadeOutRightBig"> 
 
\t \t \t <option value="fadeOutUp"> 
 
\t \t \t <option value="fadeOutUpBig"> 
 
\t \t \t <option value="flipInX"> 
 
\t \t \t <option value="flipInY"> 
 
\t \t \t <option value="flipOutX"> 
 
\t \t \t <option value="flipOutY"> 
 
\t \t \t <option value="lightSpeedIn"> 
 
\t \t \t <option value="lightSpeedOut"> 
 
\t \t \t <option value="rotateIn"> 
 
\t \t \t <option value="rotateInDownLeft"> 
 
\t \t \t <option value="rotateInDownRight"> 
 
\t \t \t <option value="rotateInUpLeft"> 
 
\t \t \t <option value="rotateInUpRight"> 
 
\t \t \t <option value="rotateOut"> 
 
\t \t \t <option value="rotateOutDownLeft"> 
 
\t \t \t <option value="rotateOutDownRight"> 
 
\t \t \t <option value="rotateOutUpLeft"> 
 
\t \t \t <option value="rotateOutUpRight"> 
 
\t \t \t <option value="hinge"> 
 
\t \t \t <option value="rollIn"> 
 
\t \t \t <option value="rollOut"> 
 
\t \t \t <option value="zoomIn"> 
 
\t \t \t <option value="zoomInDown"> 
 
\t \t \t <option value="zoomInLeft"> 
 
\t \t \t <option value="zoomInRight"> 
 
\t \t \t <option value="zoomInUp"> 
 
\t \t \t <option value="zoomOut"> 
 
\t \t \t <option value="zoomOutDown"> 
 
\t \t \t <option value="zoomOutLeft"> 
 
\t \t \t <option value="zoomOutRight"> 
 
\t \t \t <option value="zoomOutUp"> 
 
\t \t \t <option value="slideInDown"> 
 
\t \t \t <option value="slideInLeft"> 
 
\t \t \t <option value="slideInRight"> 
 
\t \t \t <option value="slideInUp"> 
 
\t \t \t <option value="slideOutDown"> 
 
\t \t \t <option value="slideOutLeft"> 
 
\t \t \t <option value="slideOutRight"> 
 
\t \t \t <option value="slideOutUp"> 
 
\t \t </datalist> 
 
\t \t <button id="trigger">Trigger</button> 
 
\t </div> 
 
</div> 
 
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

+2

jestem również w obliczu tego problemu. Potrzebuję paska przewijania do wprowadzania danych z html5. – ahmadalibaloch

+2

Obsługa danych dla przeglądarki Chrome to bzdura. Po prostu wyświetla listę bezpośrednio z ekranu bez podawania paska przewijania. Jeśli lista jest zbyt długa, powoduje awarię programu Desktop Window Manager w systemie Windows. Pod warunkiem, że wyniki zaczynają się od, a nie zawiera tekst, który został wpisany. Jest to całkowicie bezużyteczne, jeśli o mnie chodzi. Zachowanie Mozilli jest dokładnie tym, czego oczekiwałby każdy rozsądny człowiek. W przypadku tych problemów otwartych jest kilka raportów o błędach, ale nie wstrzymuj się. –

Odpowiedz

Powiązane problemy