Global CSS Box Sizing interfering with DatePicker

[Paul]

I am having trouble with some Site CSS box-sizing interfering with the Kendo DatePicker.

The problem is some standard CSS is globally applied to all text inputs with the following CSS:

input[type="text"], input[type="password"] {
      border-color: #cdcdcd;
      border-style: solid;
      border-radius: 3px;
      border-width: 1px;
      border-radius: 3px;
      height: 32px;
      padding: 8px 8px 8px 8px;
      box-sizing: border-box; /* Remove this, date picker displays ok but text box too big */
    }

This causes a grey line to appear at the bottom of the DatePicker which I want to get rid off.  The problem seems to stem from the box-sizing css property above.  Remove this, the grey area is removed.  However, the text input appears too big.

I have prepared a Dojo example for this:

http://dojo.telerik.com/@andez2000/eHEZA/17

Any help is appreciated

[Paul]

I have tried:

input[type="text"].k-input {
      box-sizing: initial;
    }

While this works in Chrome it does not work in IE11.  I am trying to get it to support Chrome, IE11, FireFox and Edge ideally.

[Paul]

I have tried the following CSS:

input[type="text"].k-input {
      box-sizing: initial;
    }

Which works in Chrome but not IE11.  I need to get this working in Chrome, IE11, Edge, FireFox.

[Paul]

Think I am sorted :)

The following seems to do the trick (although not perfect with height sizing)

input[type="text"].k-input {
      box-sizing: content-box;
    }

[Paul]

OK, the solution I went with was:

.k-datepicker {
    box-sizing: border-box;
    margin-top: -2px;
}

.k-picker-wrap {
    box-sizing: border-box;
    height: 32px;
}

input[type="text"].k-input {
    height: inherit;
    box-sizing: border-box;
    height: 30px;
}

    input[type="text"].k-input:before {
        padding: 0;
    }


span.k-icon.k-i-calendar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

[Iliana Dyankova]

Hi Paul,

Another option is to decrease line-height / height of .k-picker-wrap .k-select / .k-picker-wrap::before. Take a look at the following dojo: http://dojo.telerik.com/@Iliana/ibAnI

Regards,
Iliana Nikolova
Telerik by Progress