This is a migrated thread and some comments may be shown as answers.

Global CSS Box Sizing interfering with DatePicker

5 Answers 376 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 17 Jan 2017, 10:35 AM

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

5 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 17 Jan 2017, 10:39 AM

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.

0
Paul
Top achievements
Rank 1
answered on 17 Jan 2017, 10:40 AM

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.

0
Paul
Top achievements
Rank 1
answered on 17 Jan 2017, 10:46 AM

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;
    }
0
Paul
Top achievements
Rank 1
answered on 17 Jan 2017, 01:14 PM

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%);
}
0
Iliana Nikolova
Telerik team
answered on 18 Jan 2017, 09:33 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Date/Time Pickers
Asked by
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or