5
Ho una pagina HTML allo http://codepen.io/liang179/pen/WQvERK contiene un tag associato a un grande datalist. Viene visualizzato in chrome ha un overflow. Ci sono ancora dei dati fuori dallo schermo. Ma va bene in Firefox con la barra di scorrimento. Cosa posso fare per farlo visualizzare in chrome con la barra di scorrimento come in firefox. Di seguito è riportato il codice. Overflow di tag HTML5 <input> utilizzando il datalist in 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>
Sono anche di fronte a questo problema. Ho bisogno di una barra di scorrimento per l'input del datalist html5. – ahmadalibaloch
Il supporto per datalist di Chrome è una schifezza. Rende solo la lista direttamente dallo schermo senza fornire una barra di scorrimento. Se l'elenco è troppo lungo si blocca Desktop Window Manager su Windows. Forniva solo i risultati iniziali, anziché contenere il testo digitato. È completamente inutilizzabile per quanto mi riguarda. Il comportamento di Mozilla è esattamente quello che qualsiasi individuo normale si aspetterebbe. Ci sono diverse segnalazioni di bug aperte per questi problemi, ma non trattenere il respiro. –