This fiddle shows my problem: http://jsfiddle.net/jmTqk/2/ . The blue block occludes the spin button

Question

0

Asked: June 17, 20262026-06-17T22:29:49+00:00 2026-06-17T22:29:49+00:00

This fiddle shows my problem: http://jsfiddle.net/jmTqk/2/ . The blue block occludes the spin button

0

This fiddle shows my problem: http://jsfiddle.net/jmTqk/2/ . The blue block occludes the spin button and the datepicker dropdown link. But I think you need to be on Windows Chrome to see it. Here is a version without the blue block http://jsfiddle.net/jmTqk/1/

This HTML

<input id='date1'   type="date" />  
<div id='abcd'>blue block</div>

and this CSS

  #date1 {
    width:6em;
    border: 1px solid red;
  }
  #abcd {
    background-color:blue;
    height:150px;
    width:150px;
    display:inline-block;
  }

If you change the width of the input to 11em it fits.

On Ubuntu Chrome the css constrains the calendar drop down button to the inside of the date input field. On windows (XP, 7) it does not. Is there a way to get the spin button and dropdown to respect the extent of the date input on Windows and fit inside the red box?