Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow of HTML5 <input> tag using datalist in chrome

I have a HTML page at http://codepen.io/liang179/pen/WQvERK contain a tag associated with a large datalist. It display in chrome has a overflow.There still have data out of screen.but It is fine in firefox with scroll bar. What can I do to make it display in chrome with scroll bar like in firefox. Below is the code.

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

cn3ya


1 Answers

There is a ticket for this bug on the Chromium bug tracker, open since 2014. Some recent comments indicate that it may get prioritized in early 2017.

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

Comment 65 by zkoch@…um.org, Sep 16 2016

[…] I'll try to get this prioritized in early 2017.

Comment 69 by rbyers@…um.org, Mar 23 2017

The predictability program is reviewing the top 50 starred Blink bugs this quarter, and this is #46 on that list. We’re hoping that for each we can either close it, set an owner and target milestone, or set a NextAction date so that we know when to check back in.


Update: a comment from Apr 17, 2018 indicates that a fix was released:

Comment 91 by lonnie…@…rt.com, Apr 17

I'd like to add thanks for this also. The implementation of the scroll bar looks really nice in Version 65.0.3325.181 (Official Build) (64-bit).

Yet the ticket is still open (as of May 2018) due to some bugs discovered in Windows 10. It has been merged into ticket #773041.

like image 136
gkertai Avatar answered Nov 08 '22 14:11

gkertai