Hello,
We are currently implementing the Kendo DatePicker within our Vue application. We have used other Kendo components such as the grid before and added our own custom styles to it with no issue, however, with the DatePicker, we are getting some weird overlap. It appears that the default Kendo styles are still being displayed despite specifying classes and adding our own styles. The correct styles work within our own dev environment (Vue and webpack), however when implemented within and application that uses Vite, the Kendo styles come through again.
I've attached screenshots to show what we're getting (KendoOverlap.png) vs what we want (CustomStyles.png) and have also attached our code for the styles.
Please let us know what we can do to resolve this, thank you!
Environment with correct styles: Vue + Webpack
Environment with incorrect styles: Vue + Vite
<styles lang="scss">
@import '@progress/kendo-theme-default/dist/all.css';
@import '@fontsource-variable/material-symbols-rounded/full.css';
@import '../scss/global.scss';
/** Prevents native date picker from showing in browsers */
input[type='date']::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
@-moz-document url-prefix() {
input[type='date']::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
}
.date-picker {
&--active {
.text-field {
@extend %form-field-focus;
}
}
&--activeText {
background-color: $ds-core-color-neutral-white;
border-color: $ds-core-color-neutral-black;
border-radius: $ds-shape-border-radius-s;
.k-input-inner {
color: $ds-color-input-text-color;
}
}
&__calendar {
background-color: $ds-core-color-neutral-white;
border-radius: $ds-shape-border-radius-m;
box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.14);
padding: 6px 12px 8px 12px;
.icon-block-button {
.material-design-symbol {
color: $ds-core-color-neutral-midnight;
--symbol-wght: 400;
}
}
}
&__prev.icon-block-button {
margin-left: auto;
}
&__title {
font-size: 18px;
font-weight: 700;
line-height: 19px;
}
/** Calendar icon weight */
.material-design-symbol {
--symbol-wght: 200;
}
/** Input styles */
.text-field {
//min-width: 160px;
width: 100%;
&__icon {
z-index: 10;
}
&__input {
color: $ds-core-color-neutral-cathedral;
padding-right: 8px;
&--activeText {
color: $ds-color-input-text-color;
}
}
&--active {
@extend %form-field-focus;
}
}
.dsbutton.dsbutton--ghost {
background-color: transparent;
&:hover {
background-color: transparent;
}
.material-design-symbol {
--symbol-wght: 400;
}
}
}
.dsbutton__text {
align-items: center;
display: flex;
gap: 12px;
}
.k-calendar-tr.k-calendar-weekdays {
font-size: 16px;
}
/** Adds gap between columns */
.k-calendar-table {
border-spacing: 6px;
width: 100%;
}
.k-calendar-range .k-calendar-view {
width: 324px;
}
.dsbutton.dsbutton--text {
display: flex;
margin: auto;
}
.k-calendar-td {
.k-link {
font-weight: 400;
font-size: 18px;
padding: 6px 12px;
border: 2px solid transparent;
line-height: 24px;
}
}
/** Weekday styles */
.k-calendar .k-calendar-th,
.k-calendar .k-calendar-caption,
.k-calendar .k-meta-header,
.k-calendar .k-month-header {
color: $ds-core-color-neutral-asphalt;
padding-inline: 10px;
}
.k-input-solid:hover {
border-color: #bcbec0;
}
/** Date picker input text styles */
.k-input-inner {
font-size: 18px;
font-weight: 400;
color: lightgray;
}
.k-calendar-view {
min-height: 0;
}
/** Hides kendo toggle button */
.k-button.k-icon-button.k-button-solid.k-button-solid-base.k-input-button {
display: none;
}
/** Prevents kendo nav from showing */
.k-calendar-header {
justify-content: flex-end;
.k-calendar-nav {
display: none;
}
.k-spacer {
display: none;
}
&.k-hstack {
display: flex;
}
}
/** Removes border and box-shadow from kendo date picker */
.k-input,
.k-input-solid {
border-style: none;
}
.k-input-solid:focus,
.k-input-solid.k-focus {
border-color: transparent;
box-shadow: none;
}
/** Border radiuses added to prevent weird corner flecks */
.k-popup {
border: 0;
border-radius: $ds-shape-border-radius-m;
margin-top: 4px;
}
.k-calendar-container .k-calendar,
.k-datetime-container .k-calendar {
border-radius: $ds-shape-border-radius-m;
}
/** Current month and date styles */
.k-calendar-td.k-today {
.k-link {
background-color: $ds-core-color-neutral-white;
color: black;
border-bottom: 1.5px solid #7c7571;
}
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
border-radius: 2px;
}
.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
background-color: var(--ds-date-atom-bg-color-active);
}
/** Removes box shadow focus on unselected days */
.k-calendar .k-calendar-td:focus .k-calendar-cell-inner,
.k-calendar .k-calendar-td:focus .k-link,
.k-calendar .k-calendar-td.k-focus .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-focus .k-link {
box-shadow: none;
}
/** Hover styles */
.k-calendar .k-calendar-td:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td:hover .k-link,
.k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-hover .k-link {
background-color: $ds-core-color-neutral-white;
border: 1.5px solid $ds-core-color-neutral-midnight;
border-radius: $ds-shape-border-radius-s;
color: $ds-core-color-neutral-midnight;
}
/** Selected Date Styles */
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link {
background-color: var(--ds-date-atom-bg-color-active);
color: $ds-core-color-neutral-white;
border-radius: $ds-shape-border-radius-s;
&:hover {
background-color: var(--ds-date-atom-bg-color-active);
border: 2px solid var(--ds-date-atom-bg-color-active);
border-color: var(--ds-date-atom-bg-color-active);
color: $ds-core-color-neutral-white;
}
}
</styles>
I can recommend using scoped styles or making sure that the custom stylesheets load after the kendo theme. I created a new project with Vite and wanted to use the custom styles in order to reproduce the issue, however I was not able to. In case the issue persists can you please modify the sample project so that it reproduces?
This will allow me to debug it locally and find a possible solution.
Regards,
Filip