2015-09-08 8 views
5

में डातालिस्ट का उपयोग करते हुए टैग का ओवरफ़्लो मेरे पास http://codepen.io/liang179/pen/WQvERK पर एक HTML पृष्ठ है जो एक बड़े डेटालिस्ट से जुड़े टैग होते हैं। क्रोम में प्रदर्शित होने पर इसका ओवरफ़्लो होता है। अभी भी स्क्रीन से डेटा है। लेकिन स्क्रॉल बार के साथ फ़ायरफ़ॉक्स में यह ठीक है। फ़ायरफ़ॉक्स में स्क्रॉल बार के साथ क्रोम में इसे प्रदर्शित करने के लिए मैं क्या कर सकता हूं। नीचे कोड है। एचटीएमएल 5 <input> क्रोम

$('#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

मैं कर रहा हूँ में प्राथमिकता के आधार पर हो सकता है नहीं है इस समस्या का भी सामना करना पड़ रहा है। मुझे html5 datalist इनपुट के लिए स्क्रॉलबार की आवश्यकता है। – ahmadalibaloch

+2

क्रोम के डातालिस्ट समर्थन बकवास है। यह स्क्रॉल बार प्रदान किए बिना सीधे आपकी स्क्रीन को सीधे सूची में प्रस्तुत करता है। यदि सूची बहुत लंबी है तो यह विंडोज़ पर डेस्कटॉप विंडो प्रबंधक को दुर्घटनाग्रस्त कर देती है। यह केवल उन पाठों को प्रदान करता है जो टाइप किए गए टेक्स्ट को रखने के बजाए शुरू होते हैं। जहां तक ​​मेरा संबंध है, यह पूरी तरह से अनुपयोगी है। मोज़िला का व्यवहार बिल्कुल वही है जो किसी भी साधु व्यक्ति की अपेक्षा करेगा। इन मुद्दों के लिए कई बग रिपोर्ट खुली हैं, लेकिन अपनी सांस न पकड़ें। –

उत्तर

1

क्रोमियम बग ट्रैकर पर इस बग के लिए एक टिकट, 2014 के बाद से खुला कुछ हाल ही में टिप्पणी से संकेत मिलता है कि यह जल्दी 2017.

https://bugs.chromium.org/p/chromium/issues/detail?id=375637

+0

लिंक बंद होने पर आपके उत्तर में प्रदान किए गए लिंक का प्रासंगिक हिस्सा जोड़ें – Mawcel

संबंधित मुद्दे