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

Potential Issue with the Moonlight theme for Kendo UI for Angular

5 Answers 67 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 28 Apr 2017, 05:05 PM

I was looking at using the Moonlight theme with Kendo UI for Angular, however, I think I've come across an issue with the filtered DropDownList Component.

Using the Moonlight theme the DropDownList search box displays white text on a white background. See screenshot.

Attached are a couple of screenshots of a DropDownList populated with countries. In the first screenshot I have typed any chars in the filter - you can see a big white box but you can't see the magnifying glass icon on the right as it's being displayed in white on a white background. In the second screenshot I've typed some random chars, they're not visible and they don't match any of the country names so the drop down list is empty.

 

 

5 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 01 May 2017, 10:57 AM
Hi,

I am afraid that the issue is not reproducible on my side. I am using the following Dojo snippet., which is based on the DropDownList AngularJS demo. The filtering input has dark background on my side and the entered text is white. Could you provide a Dojo sample or modify my example, so that the issue is reproducible?

Regards,
Dimitar
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.
0
Simon
Top achievements
Rank 1
answered on 03 May 2017, 07:37 AM

Hi Dimitar,

Sorry, I just tried using using Dojo but it won't accept my Telerik username/password. Even though they work for https://www.telerik.com/account/ and https://www.telerik.com/forums.

Also I'm new to Dojo and I can't see how to create a Kendo UI for Angular 2 project. I could be mistaken here but your demo appears to be using Angular 1? :-s

Also, to see the rendering issue you need to enable filtering in the DropDownList.

0
Dimitar
Telerik team
answered on 03 May 2017, 03:21 PM
Hi,

Moonlight theme is available in Kendo UI and its AngularJS directives. The Dojo tool may be used to create Kendo UI snippets and it is not necessary to login to use this functionality. When you create a snippet, it receives a unique URL, which may be used for opening it later on.

Kendo UI for Angular 2 has Default theme based on SASS - DropDownList. And we have just released a ThemeBuilder tool, which allows you to create new SASS themes or customize existing ones. ThemeBuilder provides a Moonlight predefined swatch, which may be used to generate a Moonlight inspired SASS theme.

It would be helpful if you clarify if you are working with Angular 2 DropDownList and Moonlight theme build with ThemeBuilder, or you have a different scenario.

Regards,
Dimitar
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.
0
Simon
Top achievements
Rank 1
answered on 04 May 2017, 07:29 AM

Sorry for any confusion.

I was using your new Kendo UI for Angular (2) product and the predefined SASS Moonlight swatch from the ThemeBuilder tool.

I also found the cause of the issue. I have Bootstrap in this website as well and it's Bootstrap that's clashing with the Moonlight swatch theme. Your ThemeBuilder tool provides separate Bootstrap friendly swatches.

0
Accepted
Dimitar
Telerik team
answered on 04 May 2017, 08:49 AM
Hi,

Thank you for the clarification. Indeed, the Moonlight swatch is not designed to work out of the box with Bootstrap v4. You may use any of the Bootstrap swatches and customize it with some colors similar to the Moonlight theme.

Regards,
Dimitar
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
General Discussions
Asked by
Simon
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Simon
Top achievements
Rank 1
Share this question
or