The display of input fields is inconsistent between IE (version 11) and Chrome (version 46.0.2490.71) when using the min option in the HTML input tag. In Chrome, the input fields appear extra long, while in IE they display correctly (same as when min is not used).
To observe this inconsistency, please open the HTML file in IE as jsfiddle will always show the unwanted longer input fields.
Here is a link to the sample jsfiddle: min demo
Is there a solution you can suggest to achieve consistent display on both IE and Chrome while using min in the HTML input type="number"?
HTML Code:
<html>
<head>
<title>CommDesk AdminPage</title>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
addPlusSign();
$(".btn1").click(function(){
$(".expand1").toggle();
var btn1Text = $(".btn1").text();
if(btn1Text.indexOf("+") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '-');
$(".btn1").text(temp);
} else if (btn1Text.indexOf("-") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '+');
$(".btn1").text(temp);
}
});
})
function addPlusSign(){
if($(".expand1")){
var btn1Text = $(".btn1").text();
$(".btn1").text(btn1Text + " [+]");
}
}
$(function () {
$('.admin-form')
//we need to save values from all inputs with class 'admin-input'
.find(':input.admin-input')
.each(function () {
//save old value in each input's data cache
$(this).data('oldValue', $(this).val())
})
.end()
.submit(function (ev) {
var changed = false;
$(':input.admin-input', this).filter(function () {
if($(this).val() != $(this).data('oldValue')){
changed = true;
}
});
if($(this).hasClass('changed') && (!changed)){
alert("None of the thresholds were changed!");
ev.preventDefault()
}
if($(this).hasClass('changed') && changed){
var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
if (!allowSubmit)
ev.preventDefault()
}
});
});
$(document).on('input', '.admin-input', function(){
$(this).closest('form').addClass('changed');
});
</script>
<style>
.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}
table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:90%;
font-weight:normal;
}
#button1{
position: relative;
top:10px;
left:75%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" method="post" class="admin-form">
<div style="float:left; width:50%">
<table id="t02" class="table2">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td class="btn1" style="padding:0 30px 0 0;"><b>Call Volume</b></td>
<td><</td>
<td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="acd_call_volume_good_high", min="0", value="50"></td>
<td><input type="number", class="admin-input", name="acd_call_volume_warning_low", min="50", value="50"></td>
<td>to</td>
<td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="acd_call_volume_warning_high", min="50", value="100"></td>
<td>></td>
<td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="acd_call_volume_critical_low", min="100", value="100"></td>
</tr>
<tr>
<td align="center" class="expand1">Day of Job (DOJ)</td>
<td class="expand1"><</td>
<td class="expand1"><input type="number", name="acd_call_volume_good_high_Day of Job (DOJ)", min="0", value="50"></td>
<td class="expand1"><input type="number", name="acd_call_volume_warning_low_Day of Job (DOJ)", min="50", value="50"></td>
<td class="expand1">to</td>
<td class="expand1"><input type="number", name="acd_call_volume_warning_high_Day of Job (DOJ)", min="50", value="100"></td>
<td class="expand1">></td>
<td class="expand1"><input type="number", name="acd_call_volume_critical_low_Day of Job (DOJ)", min="100", value="100"></td>
</tr>
</table>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
</div>
</form>
</body>
</html>
CSS:
.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}
table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:90%;
font-weight:normal;
}
#button1{
position: relative;
top:10px;
left:75%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}