or
0 answers
5 views
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>
Cassie
Top achievements
Rank 1
Rank 1
asked
on
20 May 2024
0 answers
16 views
Hello!
We want to customize the InsertImage tool in the Editor, as we want to allow image upload. We found the React Documentation, and that's exactly what we want in Vue.
In React, (see this example main.tsx - nodebox - CodeSandbox) it looks straightforward to stop using the InsertImage from EditorTools and use the one in the example.
import { InsertImage } from './insertImageTool';
// const { InsertImage } = EditorTools;
But in Vue (main.vue - nodebox - CodeSandbox), how do we replace the InsertImage by the implementation in insertImageTool?
tools: [
["InsertImage"]
],
Thank you
Lucía
0 answers
17 views
Using Vue Wrapper for the Dropdowns
I have a multiselect in a v-for, it's rendering 3 widgets.
<kendo-multiselect :data-source="t.Items"
class="w-100"
:data-text-field="'Value'"
:height="300"
:value-primitive="false"
v-model="t.Selected"
:filter="'contains'"
:change="onKendoChange('multiselect')"
:placeholder="'- Select -'">
</kendo-multiselect>
When the page loads, all 3 of these fire their change event twice, so if I console log, I get 6 events. Ideally I don't want anything to happen on mount\load... just once the selection changes.
But then in the onKendoChange function, if I change ONE of the multi-selects, it's firing 3 more events, not just the event once for that one widget.
Basically I need to re-call my "getdata" function anytime something is selected...
Running 2023.3.1010
Steve
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
updated question
on
29 Feb 2024
0 answers
26 views
Hello, may I ask how to merge the red boxes in the picture?
0 answers
35 views
Hello,
Is there a way to have multiple validators on a field, like a require validator that check if the field is not empty and another that check if the field is a URL for example.
I tried to setup the validator parameter like this without success:
:validator="[requiredValidator, urlValidator]"Regards,
Fabien
0 answers
39 views
If i have a Scheduler control, displaying a single day and grouped on Person, and i reduce the Scheduler View Start/End times to, for example, 7:00am to 11:15am then it will not display a slot that overlaps this time period e.g. a slot occuring 00:00-23:59.
Oddly if i change the Scheduler View Start/End time to 7:00 to 12:00 then it will. So 7:00 to 11:15 or 7:00 to 11:30 will not display the slot, only on the hour will e.g. 7:00 to 12:00 or 7:00 to 13:00.
0 answers
33 views
The company I am employed at recently acquired Telerik Kendo UI, and we have been utilizing it for a few months now. Having dedicated many weeks to working with this product, I am now interested in learning about the opinions of others regarding it. Please take note that prior to this, my experience with frameworks was limited to using Bootstrap, Ionic, and other open-source options.
david
Top achievements
Rank 1
Rank 1
asked
on
24 Nov 2023
0 answers
67 views
Hello, I'm trying to understand why the following lines of CSS are needed for the DropDownList (configured with filtering and custom height set via popup-settings) to work.
If I uncomment any of these CSS lines, the following unwanted behavior occurs:
1: scroll down a bit, like 100 or 200px so that the the DropDownList button is close the top of the viewport
2: click on the dropdown button
3: notice that the entire page scrolls to the top, almost as if the DropDownlist tried to open to top first but then mid-animation opened to the bottom.
Specifically the scrolling to the top of the page, is a behavior I'm trying to prevent.
Adding the extra lines of CSS is not a problem for me, however when the Vue app's mount target is nested, the unwanted behavior can be observed again. In the stackblitz you can demo this by nesting the mount target inside a <div>. Because my app's mount target is really deeply nested inside a DOM I don't think it's viable to add CSS styles to every wrapping element.
Is there a workaround for this? Thanks in advance
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Rank 3
Iron
Iron
Iron
updated question
on
16 Nov 2023
0 answers
34 views
hi，
Why isn't the content displayed in the Timeline as wide as it actually is? I want this width to be displayed in proportion.
0 answers
39 views
As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.
Telerik Admin
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
06 Oct 2023
